jQuery -通过文本描述设置选择控件的选定值

我有一个选择控件，在一个javascript变量，我有一个文本字符串。

使用jQuery，我想设置选择控件的选定元素为我有文本描述的项目(而不是值，这是我没有的)。

我知道用值来设置它很简单。如。

$("#my-select").val(myVal);

但我有点难住了，通过文本描述。我想一定有办法从文本描述中得到价值，但我的大脑在周五下午太忙了，无法解决这个问题。

1147488 次浏览
小开

我还没有测试过，但这可能对你有用。

$("select#my-select option")
.each(function() { this.selected = (this.text == myVal); });
小开

获取选择框的子元素;循环遍历它们;当你找到你想要的选项时，将其设置为所选选项;返回false停止循环。

小开
最佳答案

根据描述选择jQuery v1.6+

var text1 = 'Two';
$("select option").filter(function() {
//may want to use $.trim in here
return $(this).text() == text1;
}).prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select>
<option value="0">One</option>
<option value="1">Two</option>
</select>

jQuery 1.6以下且大于等于1.4的版本 . jQuery href="https://stackoverflow.com/a/3644500/31532">

var text1 = 'Two';
$("select option").filter(function() {
//may want to use $.trim in here
return $(this).text() == text1;
}).attr('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>


<select>
<option value="0">One</option>
<option value="1">Two</option>
</select>

注意，虽然这种方法可以在高于1.6但低于1.9的版本中工作，但从1.6开始就已经弃用了。它将不工作在jQuery 1.9+。

以前的版本

val()应该处理这两种情况。

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


<select>
<option value="0">One</option>
<option value="1">Two</option>
</select>

小开 
$("#myselect option:contains('YourTextHere')").val();

将返回包含文本描述的第一个选项的值。测试了这一点，并工作。

小开

试试这个…选择myText文本选项

$("#my-Select option[text=" + myText +"]").prop("selected", true);
小开

看看Jquery selectedbox插件

selectOptions(value[, clear]):

按值选择选项，使用字符串作为参数$("#myselect2").selectOptions("Value 1");或正则表达式$("#myselect2").selectOptions(/^val/i);。

您还可以清除已经选择的选项:$("#myselect2").selectOptions("Value 2", true);

小开 
 $("#Test").find("option:contains('two')").each(function(){
if( $(this).text() == 'two' ) {
$(this).attr("selected","selected");
}
});

if语句与"two"进行精确匹配，"two 3 "将不会被匹配

小开

我在上面的例子中遇到了一个问题，这个问题是由于我的选择框值预填充了6个字符的固定长度字符串，但传入的参数不是固定长度。

我有一个rpad函数，它将右垫字符串，到指定的长度，并与指定的字符。因此，填充参数后，它可以工作。

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));




function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
pStr = pStr + pPadStr;
return pStr;
}
小开

1.7+最简单的方法是:

$("#myDropDown option:text=" + myText +"").attr("selected", "selected");

1.9 +

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

测试和工作。

小开

为了避免所有jQuery版本的复杂性，我真诚地建议使用这些非常简单的javascript函数之一…

function setSelectByValue(eID,val)
{ //Loop through sequentially//
var ele=document.getElementById(eID);
for(var ii=0; ii<ele.length; ii++)
if(ele.options[ii].value==val) { //Found!
ele.options[ii].selected=true;
return true;
}
return false;
}


function setSelectByText(eID,text)
{ //Loop through sequentially//
var ele=document.getElementById(eID);
for(var ii=0; ii<ele.length; ii++)
if(ele.options[ii].text==text) { //Found!
ele.options[ii].selected=true;
return true;
}
return false;
}
小开

这只是题外话。没有设置我选择的值。我搜遍了整个网络。实际上，我必须从web服务回调后选择一个值，因为我从它得到数据。

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected');
$("#SelectMonth").selectmenu('refresh', true);

所以刷新选择器是我唯一缺少的东西。

小开

我发现通过使用attr，你最终会选择多个选项，当你不想-解决方案是使用prop:

# EYZ0

小开
我知道这是一个老帖子，但我不能让它通过文本选择使用jQuery 1.10.3和上面的解决方案。 我最终使用以下代码(spoulson的解决方案的变化):

      var textToSelect = "Hello World";


$("#myDropDown option").each(function (a, b) {
if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
});

希望它能帮助到别人。

小开

这句话很管用:

$("#myDropDown option:contains(myText)").attr('selected', true);
小开 
 $('#theYear').on('change', function () {
FY = $(this).find('option:selected').text();
$('#theFolders').each(function () {
$('option:not(:contains(' + FY + '))', this).hide();
});
$('#theFolders').val(0);
});


$('#theYear').on('mousedown', function () {
$('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});
小开

这里有一个简单的选择。只需设置列表选项，然后将其文本设置为选定值:

$("#ddlScheduleFrequency option").selected(text("Select One..."));
小开

这个被接受的答案似乎不正确，而.val('newValue')对于函数是正确的，试图通过它的名字检索一个选择对我来说不工作，我必须使用id和类名来获取我的元素

小开

jQuery 1.9.1 (jQuery 1.9.1)

$("#my-select").val("Dutch").change();

注意:不要忘记更改()，我不得不搜索很长时间，因为那:)

小开

这里有一个很简单的方法。请使用它

$("#free").val("y").change();
小开

非常精细，其他的似乎都不管用

$('选择[名称=美元“dropdown"]”)定格()。text(“Mr") .prop(“selected",真实);

为我工作。

小开

试一试

[...mySelect.options].forEach(o=> o.selected = o.text == 'Text C' )


[...mySelect.options].forEach(o=> o.selected = o.text == 'Text C' );
<select id="mySelect">
<option value="A">Text A</option>
<option value="B">Text B</option>
<option value="C">Text C</option>
</select>

小开

如果您试图将select与ID绑定，那么下面的代码对我来说是有效的。

<select name="0product_id[]" class="groupSelect" id="groupsel_0" onchange="productbuilder.update(this.value,0);">
<option value="0" class="notag" id="id0_0">--Select--</option>
<option class="notag" value="338" id="id0_338"  >Dual Promoter Puromycin Expression Plasmid - pSF-CMV-PGK-Puro  > £114.00</option>
<option class="notag" value="282" id="id0_282"  >EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro  > £114.00</option>
<option class="notag" value="265" id="id0_265"  >FMDV IRES Puromycin Expression Plasmid - pSF-CMV-FMDV-Puro  > £114.00</option>
<option class="notag" value="101" id="id0_101"  >Puromycin Selection Plasmid - pSF-CMV-Ub-Puro AscI  > £114.00</option>
<option class="notag" value="105" id="id0_105"  >Puromycin Selection SV40 Ori Plasmid - pSF-CMV-Ub-Puro-SV40 Ori SbfI  > £114.00</option></select>

这是js代码

$( document ).ready(function() {
var text = "EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro  > £114.00";
alert(text);
$("#groupsel_0 option").filter(function() {
//may want to use $.trim in here
return $(this).text() == text;
}).prop('selected', true);
});

提交答案