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

Posted 2023-02-16

技术标签:

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

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

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

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

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

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

【问题讨论】：

@DanAtkinson 我自己也打算这样做。 select 和这个问题完全没有关系。 【参考方案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后的解决方案***.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 属性）。见***.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();

【讨论】：

如已回答：***.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);
);

【讨论】：

以上是关于jQuery - 通过文本描述设置选择控件的选定值的主要内容，如果未能解决你的问题，请参考以下文章

设置选定的索引不起作用，jquery .Val()

如何通过jquery 控制dropdownlist控件显示的选中值

淘汰赛和 Select2 获得选定的对象

UIPickerView 作为按钮操作并根据选择器的选定值设置文本字段的文本

选中复选框时在表中添加 Textfieds 使用 Jquery

使用 jquery ajax 将值设置为（文本框）服务器控件