Có sự kiện onSelect hoặc tương đương với HTML <select> không?

Tôi có một biểu mẫu đầu vào cho phép tôi chọn từ nhiều tùy chọn và thực hiện điều gì đó khi người dùng thay đổi lựa chọn. Ví dụ,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Bây giờ, doSomething()chỉ được kích hoạt khi lựa chọn thay đổi .

Tôi muốn kích hoạt doSomething()khi người dùng chọn bất kỳ tùy chọn nào, có thể là cùng một lần nữa.

Tôi đã thử sử dụng trình xử lý "onClick", nhưng nó được kích hoạt trước khi người dùng bắt đầu quá trình lựa chọn.

Vì vậy, có cách nào để kích hoạt một chức năng trên mỗi lựa chọn của người dùng không?

Cập nhật:

Câu trả lời được đề xuất bởi Darryl dường như có hiệu quả, nhưng nó không hoạt động một cách nhất quán. Đôi khi sự kiện được kích hoạt ngay khi người dùng nhấp vào menu thả xuống, ngay cả trước khi người dùng kết thúc quá trình lựa chọn!

Đây là cách đơn giản nhất:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Hoạt động cả với lựa chọn chuột và bàn phím Lên / Xuống phím được chọn được tập trung.

Tôi cần một cái gì đó giống hệt nhau. Đây là những gì làm việc cho tôi:

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Hỗ trợ này:

khi người dùng chọn bất kỳ tùy chọn nào, có thể là cùng một lần nữa

Tôi đã có cùng một vấn đề khi tôi đang tạo ra một thiết kế một vài tháng trước. Giải pháp tôi tìm thấy là sử dụng .live("change", function())kết hợp với .blur()yếu tố bạn đang sử dụng.

Nếu bạn muốn nó làm điều gì đó khi người dùng chỉ cần nhấp, thay vì thay đổi, chỉ cần thay thế changebằng click.

Tôi đã gán ID thả xuống của mình selectedvà sử dụng như sau:

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

Tôi thấy câu trả lời này không có câu trả lời được chọn, vì vậy tôi đoán rằng tôi sẽ đưa ra ý kiến ​​của mình. Điều này làm việc rất tốt cho tôi, vì vậy hy vọng ai đó có thể sử dụng mã này khi họ gặp khó khăn.

http://api.jquery.com/live/

Chỉnh sửa: Sử dụng onbộ chọn trái ngược với .live. Xem jQuery .on ()

Chỉ là một ý tưởng, nhưng có thể đặt một onclick vào từng <option>yếu tố không?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

Một tùy chọn khác có thể là sử dụng onblur khi chọn. Điều này sẽ kích hoạt bất cứ lúc nào người dùng nhấp chuột khỏi lựa chọn. Tại thời điểm này, bạn có thể xác định tùy chọn nào đã được chọn. Để có trình kích hoạt này ngay cả vào thời điểm chính xác, onclick của tùy chọn có thể làm mờ trường (làm cho một cái gì đó khác hoạt động hoặc chỉ .blur () trong jQuery).

Cách tiếp cận onclick không hoàn toàn xấu nhưng như đã nói, nó sẽ không được kích hoạt khi giá trị không bị thay đổi khi nhấp chuột.
Tuy nhiên, có thể kích hoạt sự kiện onclick trong sự kiện onchange.

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>

Sẽ mở rộng về câu trả lời của jitbit. Tôi thấy thật kỳ lạ khi bạn nhấp vào thả xuống và sau đó nhấp vào thả xuống mà không chọn bất cứ điều gì. Kết thúc với một cái gì đó dọc theo dòng:

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
}; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

Điều này có ý nghĩa hơn đối với người dùng và cho phép JavaScript chạy mỗi khi họ chọn bất kỳ tùy chọn nào kể cả tùy chọn trước đó.

Nhược điểm của phương pháp này là nó phá vỡ khả năng tab trên một thả xuống và sử dụng các phím mũi tên để chọn giá trị. Điều này được tôi chấp nhận vì tất cả người dùng nhấp vào mọi thứ mọi lúc cho đến khi kết thúc vĩnh cửu.

Nếu bạn thực sự cần cái này để làm việc như thế này, tôi sẽ làm cái này (để đảm bảo nó hoạt động bằng bàn phím và chuột)

• Thêm một trình xử lý sự kiện onf Focus vào phần chọn để đặt giá trị "hiện tại"
• Thêm một trình xử lý sự kiện onclick vào phần chọn để xử lý các thay đổi của chuột
• Thêm một trình xử lý sự kiện onkeypress vào phần chọn để xử lý các thay đổi của bàn phím

Thật không may, onclick sẽ chạy nhiều lần (ví dụ như khi bật chọn ... và khi chọn / đóng) và onkeypress có thể kích hoạt khi không có gì thay đổi ...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

Để thực hiện đúng một sự kiện mỗi khi người dùng chọn một thứ gì đó (thậm chí cùng một tùy chọn), bạn chỉ cần lừa hộp chọn.

Giống như những người khác đã nói, chỉ định một tiêu cực selectedIndexvề trọng tâm để buộc sự kiện thay đổi. Mặc dù điều này không cho phép bạn đánh lừa hộp chọn, nhưng nó sẽ không hoạt động sau đó miễn là nó vẫn tập trung. Cách khắc phục đơn giản là buộc hộp chọn bị mờ, hiển thị bên dưới.

Mã chuẩn / HTML:

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Plugin jQuery:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

Bạn có thể xem một bản demo làm việc ở đây .

Trên thực tế, các sự kiện onclick sẽ KHÔNG kích hoạt khi người dùng sử dụng bàn phím để thay đổi lựa chọn trong điều khiển chọn. Bạn có thể phải sử dụng kết hợp onChange và onClick để có được hành vi mà bạn đang tìm kiếm.

Điều này có thể không trả lời trực tiếp câu hỏi của bạn, nhưng vấn đề này có thể được giải quyết bằng các điều chỉnh mức thiết kế đơn giản. Tôi hiểu điều này có thể không áp dụng 100% cho tất cả các trường hợp sử dụng, nhưng tôi khuyên bạn nên cân nhắc lại việc suy nghĩ lại luồng người dùng của ứng dụng của bạn và nếu có thể thực hiện đề xuất thiết kế sau.

Tôi quyết định làm điều gì đó đơn giản hơn so với hack lựa chọn thay thế cho onChange()sử dụng các sự kiện khác mà không thực sự có nghĩa là cho mục đích này ( blur, click, vv)

Cách tôi giải quyết nó:

Đơn giản chỉ cần đặt trước một thẻ tùy chọn giữ chỗ, chẳng hạn như chọn không có giá trị với nó.

Vì vậy, thay vì chỉ sử dụng cấu trúc sau, yêu cầu thay thế hack-y:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Cân nhắc sử dụng cái này:

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Vì vậy, theo cách này, mã của bạn đơn giản hơn rất nhiều và onChangesẽ hoạt động như mong đợi, mỗi khi người dùng quyết định chọn thứ gì đó không phải là giá trị mặc định. Bạn thậm chí có thể thêm disabledthuộc tính vào tùy chọn đầu tiên nếu bạn không muốn họ chọn lại và buộc họ chọn thứ gì đó từ các tùy chọn, do đó sẽ gây ra onChange()hỏa hoạn.

Tại thời điểm trả lời này, tôi đang viết một ứng dụng Vue phức tạp và tôi thấy rằng lựa chọn thiết kế này đã đơn giản hóa mã của tôi rất nhiều. Tôi đã dành hàng giờ cho vấn đề này trước khi tôi giải quyết vấn đề này và tôi đã không phải viết lại rất nhiều mã của mình. Tuy nhiên, nếu tôi đã sử dụng các giải pháp thay thế hacky, tôi sẽ cần phải tính đến các trường hợp cạnh, để ngăn việc bắn hai lần yêu cầu ajax, v.v. Điều này cũng không làm rối tung hành vi mặc định của trình duyệt như một phần thưởng tuyệt vời (đã thử nghiệm trên thiết bị di động trình duyệt cũng vậy).

Đôi khi, bạn chỉ cần lùi lại một bước và suy nghĩ về bức tranh lớn để có giải pháp đơn giản nhất.

Những gì tôi đã làm khi gặp phải một vấn đề tương tự là tôi đã thêm một 'onF Focus' vào hộp chọn có thêm tùy chọn chung mới ('chọn một tùy chọn' hoặc một cái gì đó tương tự) và mặc định nó là tùy chọn đã chọn.

Vì vậy, mục tiêu của tôi là có thể chọn cùng một giá trị nhiều lần, về cơ bản sẽ ghi đè hàm onchange () và biến nó thành một phương thức onclick () hữu ích.

Dựa trên những gợi ý ở trên, tôi đã đưa ra cái này phù hợp với tôi.

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/

trước hết bạn sử dụng onChange như một trình xử lý sự kiện và sau đó sử dụng biến cờ để làm cho nó thực hiện chức năng bạn muốn mỗi khi bạn thực hiện thay đổi

<select

var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}

<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>

Thêm tùy chọn bổ sung làm tùy chọn đầu tiên, như tiêu đề của cột, sẽ là giá trị mặc định của nút thả xuống trước khi nhấp vào nó và đặt lại ở cuối doSomething(), vì vậy khi chọn A / B / C, sự kiện onchange luôn luôn chạy, khi lựa chọn State, không làm gì và trở về. onclicklà rất không ổn định như nhiều người đã đề cập trước đó. Vì vậy, tất cả những gì chúng ta cần làm là tạo nhãn nút ban đầu khác với tùy chọn thực sự của bạn để onchange sẽ hoạt động trên bất kỳ tùy chọn nào.

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

Điều tuyệt vời về thẻ chọn (trong kịch bản này) là nó sẽ lấy giá trị của nó từ các thẻ tùy chọn.

Thử:

<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>

Làm việc đàng hoàng cho tôi.

sử dụng jquery:

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>

Đây là giải pháp của tôi, hoàn toàn khác với bất kỳ ai khác ở đây. Nó sử dụng vị trí chuột để tìm hiểu xem một tùy chọn đã được nhấp như trái ngược với nhấp vào hộp chọn để mở danh sách thả xuống. Nó sử dụng vị trí event.screenY vì đây là biến trình duyệt chéo đáng tin cậy duy nhất. Một sự kiện di chuột phải được đính kèm trước để nó có thể tìm ra vị trí điều khiển liên quan đến màn hình trước sự kiện nhấp chuột.

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

Đây là jsFiddle của tôi http://jsfiddle.net/sU7EV/4/

bạn nên thử sử dụng option:selected

$("select option:selected").click(doSomething);

Những gì làm việc cho tôi:

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

Theo cách đó, onchange gọi 'doS Something ()' khi tùy chọn thay đổi và onclick gọi 'doS Something ()' khi sự kiện onchange là sai, nói cách khác, khi bạn chọn cùng một tùy chọn

Hãy thử điều này (sự kiện được kích hoạt chính xác khi bạn chọn tùy chọn, mà không thay đổi tùy chọn):

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4

<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

Ở đây bạn có chỉ mục được trả về và trong mã js, bạn có thể sử dụng trả về này với một công tắc hoặc bất cứ điều gì bạn muốn.

Thử cái này:

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Một thời gian dài trước đây nhưng để trả lời câu hỏi ban đầu, điều này có giúp ích gì không? Chỉ cần đặt onClickvào SELECTdòng. Sau đó đặt những gì bạn muốn mỗi người OPTIONlàm trong các OPTIONdòng. I E:

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>

<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Tôi đã phải đối mặt với một nhu cầu tương tự và cuối cùng đã viết một chỉ thị angularjs cho cùng -

liên kết guthub - chọn góc

Đã sử dụng element[0].blur(); để loại bỏ tiêu điểm ra khỏi thẻ chọn. Logic là để kích hoạt mờ này trên lần nhấp thứ hai của danh sách thả xuống.

as-select được kích hoạt ngay cả khi người dùng chọn cùng một giá trị trong danh sách thả xuống.

DEMO - liên kết

Câu trả lời đúng nhất là không sử dụng trường chọn (nếu bạn cần làm gì đó khi bạn chọn lại câu trả lời tương tự.)

Tạo menu thả xuống với menu div, nút, hiển thị / ẩn thông thường. Liên kết: https://www.w3schools.com/howto/howto_js_dropdown.asp

Có thể tránh được một người có thể thêm người nghe sự kiện vào các tùy chọn. Nếu đã có một trình nghe onSelect cho phần tử chọn. Và nếu nhấp vào trường đã chọn, không kích hoạt tắt mousedown, mouseup và nhấp vào tất cả cùng một lúc trên mousedown.

Có một vài điều bạn muốn làm ở đây để đảm bảo rằng nó ghi nhớ các giá trị cũ hơn và kích hoạt một sự kiện onchange ngay cả khi tùy chọn tương tự được chọn lại.

Điều đầu tiên bạn muốn là một sự kiện onChange thông thường:

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

Để có trình kích hoạt sự kiện onChange ngay cả khi cùng một tùy chọn được chọn lại, bạn có thể hủy đặt tùy chọn đã chọn khi danh sách thả xuống nhận được tiêu điểm bằng cách đặt nó thành một giá trị không hợp lệ. Nhưng bạn cũng muốn lưu trữ giá trị đã chọn trước đó để khôi phục nó trong trường hợp người dùng không chọn bất kỳ tùy chọn mới nào:

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

Đoạn mã trên sẽ cho phép bạn kích hoạt onchange ngay cả khi cùng một giá trị được chọn. Tuy nhiên, nếu người dùng nhấp bên ngoài hộp chọn, bạn muốn khôi phục giá trị trước đó. Chúng tôi làm điều đó trên onBlur:

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

Vui lòng lưu ý rằng Trình xử lý sự kiện không được hỗ trợ cho thẻ TÙY CHỌN trên IE, với một suy nghĩ nhanh chóng..Tôi đã đưa ra giải pháp này, hãy thử nó và cho tôi phản hồi của bạn:

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

Những gì tôi đang làm ở đây thực sự là đặt lại chỉ mục đã chọn để sự kiện onchange luôn được kích hoạt, đúng là bạn sẽ mất mục đã chọn khi bạn nhấp và có thể gây khó chịu nếu danh sách của bạn dài, nhưng nó có thể giúp bạn trong một ngày nào đó ..

những gì về việc thay đổi giá trị của lựa chọn khi phần tử đạt được tiêu điểm, ví dụ (với jquery):

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});

Tôi tìm ra giải pháp này.

đặt chỉ số được chọn của phần tử được chọn thành 0 ban đầu

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

gọi phương thức này trên sự kiện