jQuery使用其值而不是文本更改下拉列表的值

Question

我在使用jquery更改下拉菜单的提示时遇到困难。

<div class="input-box">
    <select name="options[4]" id="select_4">
    <option value="">-- Please Select --</option>
    <option value="24">Not Sure - Send Me Some Samples First </option>
    <option value="13">1 Jet Black </option>
    <option value="14">Blondette 4/27 </option>
    <option value="15">Boho Blonde 613/12 </option>
    <option value="16">Caramel 6 </option>
    <option value="17">Cherry 530 </option>
    <option value="18">Dirty Blonde 612/12 </option>
    <option value="19">Ebony Black 1b </option>
    <option value="20">Hot Toffee 4 </option>
    <option value="21">LA Blond 24/613 </option>
    <option value="22">Malibu Blonde 60/613 </option>
    <option value="23">Raven 2 </option></select>
</div>

我不明白为什么这行不通

function changeIt(theId) {
    $j('.input-box:eq(0)').val(theId);
}

changeIt(22);

Answer 1

好吧，您没有选择select元素：

$j('.input-box:eq(0) select').val(theId);

'.input-box:eq(0)'仅选择div。 而且val()方法对div无效。

DEMO

Answer 2

尝试：

$j('.input-box:first select > option[value=' + theId + ']').attr('selected', 'selected');

Answer 3

我想到了。 这将循环遍历div中包含“ .input-box”类的第一个SELECT。 取出ID和文本。

$j('.input-box:eq(0) option').each(function() {

    theText=$j(this).text();
    itsId = $j(this).val();      

});

我用它来提取所有值并根据下拉菜单中的当前选项生成按钮。 然后，我使用了以下功能（onClick）来更改下拉菜单的选定值。

function changeOption(theId) {
    //alert("Change to value number:"+theId);
    $j('.input-box select').val(theId); 
}