click option in select by jquery?

Question

<select id="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Whenever an option in the select is clicked, I need to call an ajax with $("#myselect option").click(hanler) event handler.But this feature is not working in Safari Browser

ex:

$("#myselect option").click(function(){
    // call ajax
})

I want when the user reselect the option it still called the ajax. Change() only when have change in option. — Huy, Nov 22 '16 at 05:55
create a custom dropdown using divs coz what youre looking for is not possible with the default dropdowns — Dev Man, Nov 22 '16 at 07:03

score 3 · Answer 1 · answered Nov 22 '16 at 06:11

3

Try using change() while selecting option from select.

$("#myselect option").on("change",function(){
// call ajax
});

answered Nov 22 '16 at 06:11

Sujan Mhrzn

147
1
5

1

if value is selected, i select it again, change() not effect. – Huy Nov 22 '16 at 06:19
You can set a blank option at first. Then you can select other option. – Sujan Mhrzn Nov 22 '16 at 12:04

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

You can look into the answer already written here. Give a try by adding an extra event like blur();

$('select').quickChange(function () {
  $(this).blur();
  $('select').focus(); // somehow prevents an extra blur from firing   on focus
});


$("#select-choice-month").change(function () {
  // update second select dynamically
});

Hope it will give you an answer.

edited May 23 '17 at 12:01

Community

1
1

answered Nov 22 '16 at 06:04

Karthik Sivakumar

106
12

Thanks, i will check it now. – Huy Nov 22 '16 at 06:19
Yes! Give a try and check. It should work & accept my answer the right one. Thanks in advance! – Karthik Sivakumar Nov 22 '16 at 06:21
sorry, I tested it on a safari of ipad, it does not run as expected – Huy Nov 22 '16 at 06:39
Have you checked these links http://stackoverflow.com/questions/7680992/change-event-not-firing-on-select-elements-with-mobile-safari-form-assistant – Karthik Sivakumar Nov 22 '16 at 06:50
and also this link http://stackoverflow.com/questions/5960731/strange-behavior-of-select-dropdowns-onchange-js-event-when-using-next-on-m – Karthik Sivakumar Nov 22 '16 at 06:51

score 0 · Answer 3 · answered Nov 22 '16 at 06:44

Its better to use change event rather than click event, also bind the code inside $(document).ready. Please try the sample code and verify whether this fits for you.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("select#myselect").change(function () {
                console.log("You have selected " + $("select#myselect").val());
                //Call your ajax here.
            })
        });
    </script>
</head>

<body>
    <select id="myselect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</body>

</html>

Example, i open select_box and select value 1, chage() effect, now, i open select_box and select value 1, change() not effect. change () only works when the option changed. — Huy, Nov 22 '16 at 06:52
The main problem is that there is no click event for option. Either you can add click event for select that will trigger even you just click on select dropdown itself, or you can go for change event that will trigger only if the selected option changes. — Nitheesh, Nov 22 '16 at 07:33

score 0 · Answer 4 · answered Aug 31 '18 at 08:54

0

You need to use the "change" event on the select tag, not the options themself.

$('#myselect').on('change', function (e) {
    myFunction();
});

Everytime, you change the current value of your select, "myfunction' will be call.

answered Aug 31 '18 at 08:54

Max Beckman

1

click option in select by jquery?

4 Answers4

Linked