6
<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
  • 11,278
  • 30
  • 120
  • 219
  • 1
    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 Nov 23 '16 at 22:26

4 Answers4

14

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);
rupps
  • 9,712
  • 4
  • 55
  • 95
7

$(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>
Daniel
  • 2,744
  • 1
  • 31
  • 41
2

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

<tfoot>
  <tr>
    <td>
       <select>
        <option value="222">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.

CaptainBli
  • 4,121
  • 4
  • 39
  • 58
Jorge F
  • 679
  • 1
  • 11
  • 24
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>
Daerik
  • 4,167
  • 2
  • 20
  • 33