jQuery-通过文本说明设置选择控件的选择值

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

使用jQuery，我想将select控件的selected元素设置为具有文本描述的项目（与值相对，而我没有）。

我知道按值设置它是微不足道的。例如

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

但是我对通过文本描述进行操作感到有些困惑。我想一定有办法从文字描述中获取价值，但是星期五下午我的大脑太忙了，无法计算出来。

按说明选择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>

低于1.6且大于等于1.4的jQuery版本

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>

我尚未对此进行测试，但这可能对您有用。

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

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

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

我以这种方式执行（jQuery 1.9.1）

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

注意：不要忘了change（），因此我不得不搜索很长时间:)

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

将返回包含文本描述的第一个选项的值。经过测试，可以正常工作。

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

我知道这是一篇过时的文章，但是我无法使用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);

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

if语句与“两个”和“两个三”完全匹配

1.7+的最简单方法是：

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

1.9+

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

经过测试和工作。

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

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

看一下jQuery selectedbox插件

selectOptions(value[, clear]): 

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

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

只是旁注。未设置我选择的值。我已经在网上搜索了。实际上，从Web服务回叫后，我必须选择一个值，因为我正在从中获取数据。

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

因此，刷新选择器是我唯一缺少的东西。

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

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

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

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

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


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

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

这个公认的答案似乎不正确，而.val（'newValue'）对于该函数是正确的，尝试按其名称检索选择对我不起作用，我必须使用id和classname来获取我的元素

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

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

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