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

【问题标题】：jQuery - setting the selected value of a select control via its text descriptionjQuery - 通过文本描述设置选择控件的选定值
【发布时间】：2010-10-04 12:11:13
【问题描述】：

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

使用 jQuery，我想将选择控件的选定元素设置为具有我拥有的文本描述的项目（而不是我没有的值）。

我知道按值设置它非常简单。例如

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

但我有点难过通过文字描述来做到这一点。我想肯定有办法从文本描述中提取价值，但我的大脑太周五下午了，无法解决。

【问题讨论】：

@DanAtkinson 我自己也打算这样做。 select 和这个问题完全没有关系。

标签： javascript jquery

【解决方案1】：

我没有对此进行测试，但这可能对你有用。

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

【讨论】：

【解决方案2】：

获取选择框的子项；遍历它们；找到所需的选项后，将其设置为选定选项；返回 false 停止循环。

【讨论】：

【解决方案3】：

根据 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 versions below 1.6 and greater than or equal to 1.4

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+ 中will not work。

以前的版本

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>

【讨论】：

这感觉它不应该工作（它看起来可能是模棱两可的）但它实际上应该对我来说很好。谢谢。
请注意，jQuery 1.4 现在已将此行为更改为在已指定属性的情况下按value 选择，并且仅在缺少value 属性时按文本选择。所以在这个例子中$('select').val('Two') 将在 1.3.x 中选择第二个选项，但在 1.4.x 中什么也不做。
那么，现在在 1.4 中最好的方法是什么？
在更新的 jQuery 版本中，.val('not-an-option-value') 会将选择重置为第一个选项。
这个问题的第一个答案似乎是1.3.x后的解决方案stackoverflow.com/questions/3644449/…

【解决方案4】：

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

将返回包含您的文本描述的第一个选项的值。对此进行了测试并且有效。

【讨论】：

谢谢 - 我想这可能是我使用的版本，因为当没有匹配的文本时我还需要有逻辑，这似乎是最简单的机制，能够做到这一点。
请记住，它只会获取与文本匹配的第一个选项的值。
此外，您可以将 attr("selected","selected") 链接到包装集而不是 val() 上，这类似于 CarolinaJay65 的回答
OP 说 "setting value" 不是 "getting value"

【解决方案5】：

试试这个...选择带有文本 myText 的选项

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

【讨论】：

@spoulson 的回答对我有用...我试图在没有 .each 的情况下做到这一点
不幸的是，这种方法在很多情况下都不起作用。我什至不得不时不时地改成经典的$("#my-Select option[text=" + myText +"]").get(0).selected = true; 风格:(...
确保在重新设置之前先删除选定的属性，否则它似乎不起作用（在 1.9 中适用于我）
@MarkW 对于 1.9，使用 .prop 而不是 .attr；更改的原因是在 1.9 中，jQuery 禁用了旧的 hack，它们允许您使用 .attr 更改一些 DOM 属性以及 HTML 属性。（如果您不知道区别，请使用 Google javascript dom properties vs attributes。）
更新了答案以使用 .prop('selected', true) 而不是 .attr('selected', 'selected') 以实现 jQuery 1.9+ 兼容性。

【解决方案6】：

看看jquery selectedbox plugin

selectOptions(value[, clear]):

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

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

【讨论】：

【解决方案7】：

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

if语句与“二”完全匹配，“二三”将不匹配

【讨论】：

不，我不是这个意思。我觉得我的评论有点不清楚，所以我把它删除了。不过，我确实赞成您的回答，因为它适用于我的情况。

【解决方案8】：

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

我有一个 rpad 函数，它将正确填充一个字符串，到指定的长度，并使用指定的字符。因此，在填充参数后它可以工作。

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


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

【讨论】：

【解决方案9】：

1.7+ 最简单的方法是：

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

1.9+

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

经过测试并且有效。

【讨论】：

不是在 1.9+ 它没有。从 1.6 开始，您应该使用 .prop 来更改 DOM 属性，而不是 .attr（用于 HTML/DOM 属性）。见stackoverflow.com/q/5874652/1709587
我会使用 ("selected",true) 而不是 "selected" 的真实值

【解决方案10】：

为了避免所有 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;
}

【讨论】：

它允许通过值或文本选择选择选项（取决于调用的函数）。例如：setSelectByValue('sausages','2');将在 id 为“sausages”的选择对象中找到并选择值为“2”的选项。
@Neal 呃...它回答了这个问题？

【解决方案11】：

只是一个旁注。我选择的值没有被设置。我在网上到处搜索。实际上，我必须在从 Web 服务回调后选择一个值，因为我正在从中获取数据。

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

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

【讨论】：

这是正确的——尽管...我看不出第二行的理由。应该按原样工作。

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

我知道这是一篇旧帖子，但我无法使用 jQuery 1.10.3 和上述解决方案通过文本选择它。我最终使用了以下代码（spoulson 解决方案的变体）：

      var textToSelect = "Hello World";

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

希望对某人有所帮助。

【讨论】：

【解决方案14】：

这条线有效：

$("#myDropDown option:contains(myText)").attr('selected', true);

【讨论】：

对于 jQuery 1.12.3 必须使用 prop('selected', true)

【解决方案15】：

 $('#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');
});

【讨论】：

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

这个接受的答案似乎不正确，而 .val('newValue') 对于函数是正确的，尝试按名称检索选择对我不起作用，我必须使用 id 和类名来获取我的元素

【讨论】：

【解决方案18】：

我是这样做的（jQuery 1.9.1）

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

注意：不要忘记change()，因为这个我不得不搜索很长时间:)

【讨论】：

希望我能多次投票。下班时间过去了一个小时，现在我可以回家了。
很好的答案！简短而简单...这应该是最重要的...继续投票。
这对我有用，谢谢！但是，这不是按 OP 要求的那样选择显示的文本，而是按 OP 所没有的值本身进行选择吗？

【解决方案19】：

这是非常简单的方法。请使用它

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

【讨论】：

如已回答：stackoverflow.com/a/32589732/861716.

【解决方案20】：

非常繁琐，似乎没有其他工作

$('select[name$="dropdown"]').children().text("Mr").prop("selected", true);

为我工作。

【讨论】：

【解决方案21】：

试试

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

[...mySelect.options].forEach(o=&gt; 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>

【讨论】：

【解决方案22】：

如果您尝试将 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>

这是 TEH 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);
});

【讨论】：