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
  • 10,010
  • 26
  • 106
  • 195
  • 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

12

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,472
  • 4
  • 56
  • 91
5

$(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,654
  • 1
  • 30
  • 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
  • 3,941
  • 4
  • 37
  • 56
Jorge F
  • 659
  • 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
  • 3,937
  • 2
  • 19
  • 33