JQuery - 如何根据值选择下拉项

问题描述 投票：73回答：12

我想根据条目的值设置下拉列表（select）进行更改。

我有

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

而且我知道我想要更改下拉列表，以便选择值为“fg”的选项。我怎么能用JQuery做到这一点？

javascript jquery select jquery-selectors
12个回答
127
投票

You should use

$('#dropdownid').val('selectedvalue');

Here an example:

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
0
投票

我有一个不同的情况，下拉列表值已经硬编码。只有12个区域，因此jQuery Autocomplete UI控件不会被代码填充。

解决方案更容易。因为我不得不涉及其他帖子，假设控件是动态加载的，没有找到我需要的东西，然后最终想出来了。

因此，如果你有HTML如下所示，设置所选索引是这样设置的，请注意-input部分，它是下拉ID的补充：

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

关于自动完成控件的其他问题是如何正确禁用/清空它。我们有3个控件一起工作，其中2个互斥：

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

其中一些超出了帖子的范围，我不知道在哪里准确。由于这是非常有用的，并花了一些时间来弄清楚，它正在分享。

Und另外......要启用这样的控件，它是（禁用，假）和NOT（启用，真） - 这也花了一些时间来弄清楚。 :)

除了帖子之外，唯一需要注意的是：

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

所有人都分享了，因为花了很长时间才能动态学习这些东西。希望这是有帮助的。

0
投票

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
0
投票

$（'select＃myselect option [value =“ab”]'）。

22
投票
$('#yourdropddownid').val('fg');

（可选）

$('select>option:eq(3)').attr('selected', true);

其中3是您想要的选项的索引。

Live Demo

15
投票
$('#mySelect').val('fg');...........
8
投票

你可以使用这个jQuery代码，我发现它更容易使用：

$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>
5
投票

你可以简单地使用：

$('#select_id').val('fg')
4
投票
$('#mySelect').val('ab').change();
2
投票

在你的情况下$("#mySelect").val("fg") :)

1
投票

可能为时已晚，无法回答，但至少有一个人会得到帮助。

您可以尝试两种选择：

当您想要根据索引值进行分配时，这是结果，其中“0”是索引。

 $('#mySelect').prop('selectedIndex', 0);

不要使用'attr'，因为它已被最新的jquery弃用。

如果要根据选项值进行选择，请选择以下选项：

 $('#mySelect').val('fg');

其中'fg'是选项值

0
投票

您可以按名称选择下拉选项值

jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.