JQUERY: How do I select an option by value? [duplicate]

3

This question already has an answer here:

<tfoot>
    <select>
        <option value="222"></option>
        <option value="2222">2222</option>
        <option value="zaza">zaza</option>
    </select>
</tfoot>

I tried that: 

$('tfoot select').val('zaza');


$("tfoot select").val("zaza")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tfoot>
    <select>
        <option value="222"></option>
        <option value="2222">2222</option>
        <option value="zaza">zaza</option>
    </select>
</tfoot>

Any idea ? Select = make it selected = trigger the change event

yarek

출처 jquery
  • Note that selecting an option from Javascript won't automatically trigger a change event. You need to do that explicitly after you set the value. - Barmar

4 답변

8

You can use:

$('option[value="222"]')

In general,

$("tag[attr=value]") will search a tag with attributte attr and value value

To select it,

$('option[value="222"]').prop("selected", true);

  • ok.. but how to Select it ? - yarek
2
 

$(function () {
  $("#clientList").children('[value="zaza"]').attr('selected', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tfoot>
    <select id="clientList">
        <option value="222">222</option>
        <option value="2222">2222</option>
        <option value="zaza">zaza</option>
    </select>
</tfoot>

1

Is this what you want? I "select" the value on $(document).ready

<tfoot>
  <tr>
    <td>
       <select>
        <option value="222"></option>
        <option value="2222">2222</option>
        <option value="zaza">zaza</option>
       </select>
    </td>
  </tr>
</tfoot>

<script>
    $(function(){
        $("tfoot select").val("zaza");
    });
</script>

https://jsfiddle.net/0skmm4pp/

By the way the <tfoot> tag is wrong, you are missing the <tr> tag and <td> tag. Or you can use rupps answer.

0

You can select the option using the property selectedIndex:

var selectedIndex = $('select').prop('selectedIndex');
var option= $('select').find('option:eq(' + selectedIndex + ')');

Or just targeting it via index:

var option= $('select').find('option:eq(0)');

Or target it directly:

var option = $('option[value="zaza"]');

To select any of the above references use:

option.attr('selected', true);


$('button').on('click', function() {
  var option = $('option[value="zaza"]');
  option.attr('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tfoot>
    <select>
        <option value="222" selected>selected</option>
        <option value="2222">2222</option>
        <option value="zaza">zaza</option>
    </select>
</tfoot>

<button>Change</button>

  • ok: that finds the element, but does not select it visually (or trigger the change event) - yarek
  • Yes. Change the attribute 'selected' to true. I have it in my answer. - Daerik
  • I've added a snippet for you to see that it does select it visually. - Daerik

Linked

Related

Latest