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

2020/09/24 22:41 · javascript ·  · 0评论

我有一个选择控件,并且在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;
}

这行有效:

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

我知道这是一篇旧文章,但是我无法使用jQuery 1.10.3和以上解决方案通过文本进行选择。我最终使用了以下代码(spoulson解决方案的变体):

      var textToSelect = "Hello World";

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

希望它能帮助某人。

 $("#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..."));

非常乖巧,似乎没有其他工作

$('select [name $ =“ dropdown”]')。children()。text(“ Mr”)。prop(“ selected”,true);

为我工作。

尝试

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

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

本文地址:http://javascript.askforanswer.com/jquery-tongguowenbenshuomingshezhixuanzekongjiandexuanzezhi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!