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

I want set a dropdown(select) to be change based on the value of the entries.

我希望根据条目的值设置一个下拉(select)。

I have

我有

<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>

And I know that I want to change the dropdown so that the option with the value of "fg" is selected. How can I do this with JQuery?

我知道我想要更改下拉菜单，以便选择带有“fg”值的选项。如何使用JQuery实现这一点?

10 个解决方案

#1

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

#2

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

Optionally,

可选地,

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

where 3 is the index of the option you want.

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

Live Demo

现场演示

#3

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

#4

You can simply use:

你可以简单的使用:

$('#select_id').val('fg')

#5

$('#mySelect').val('ab').change();

#6

In your case $("#mySelect").val("fg") :)

在您的案例中，$(“my# select”).val(“fg”):)

#7

You can use this jQuery code which I find it eaiser to use:

您可以使用这个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>

#8

May be too late to answer, but at least some one will get help.

也许回答得太晚了，但至少有人会得到帮助。

You can try two options:

你可以尝试两种选择:

This is the result when you want to assign based on index value, where '0' is Index.

这是根据索引值进行赋值的结果，其中'0'是索引。

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

don't use 'attr' since it is deprecated with latest jquery.

不要使用“attr”，因为它已经被最新的jquery弃用了。

When you want to select based on option value then choose this :

当您想要基于选项值进行选择时，请选择以下选项:

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

where 'fg' is the option value

“fg”是选项值?

#9

You can select dropdown option value by name

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

jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }
});

#10

I have a different situation, where the drop down list values are already hard coded. There are only 12 districts so the jQuery Autocomplete UI control isn't populated by code.

我有另一种情况，即下拉列表值已经被硬编码。只有12个区域，所以jQuery自动完成UI控件没有代码填充。

The solution is much easier. Because I had to wade through other posts where it was assumed the control was being dynamically loaded, wasn't finding what I needed and then finally figured it out.

解决方法要简单得多。因为我不得不费力阅读其他文章，假设控件是动态加载的，没有找到我需要的，然后最终找到它。

So where you have HTML as below, setting the selected index is set like this, note the -input part, which is in addition to the drop down id:

如果你有如下所示的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>

Something else figured out about the Autocomplete control is how to properly disable/empty it. We have 3 controls working together, 2 of them mutually exclusive:

关于自动完成控件的另一个问题是如何正确地禁用/清空它。我们有三个控制一起工作，其中两个相互排斥:

//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
    }
});

Some of this is beyond the scope of the post and I don't know where to put it exactly. Since this is very helpful and took some time to figure out, it's being shared.

有些已经超出了职位范围，我不知道确切的位置。因为这是非常有用的，并且花了一些时间去弄清楚，它正在被共享。

Und Also ... to enable a control like this, it's (disabled, false) and NOT (enabled, true) -- that also took a bit of time to figure out. :)

和也……要启用这样的控件，它是(禁用的、错误的)而不是(启用的、正确的)——这也要花一些时间才能弄清楚。:)

The only other thing to note, much in addition to the post, is:

除了这篇文章之外，要注意的另一件事是:

    /*
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());
        }
    });

All shared because it took too long to learn these things on the fly. Hope this is helpful.

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