如何在jQuery的SELECT元素中选择特定选项？

最新推荐文章于 2022-08-17 16:29:39 发布

p15097962069

最新推荐文章于 2022-08-17 16:29:39 发布

阅读量1.2k

点赞数 1

文章标签： jquery

原文链接：https://tr.sofbug.com/question/1Jqm

版权

这篇博客讨论了如何在jQuery中根据索引、值或文本选择SELECT元素的特定选项。文章提供了多个实用方法，包括使用`val()`、`prop('selected', true)`等，并提醒注意不同情况下的选项匹配和触发事件。还给出了多种示例代码，适用于不同场景下的选项选择。" 103040625,5633689,Spring事务管理：原理与传播属性详解,"['Spring框架', '事务处理', '数据库事务', 'AOP代理']

摘要由CSDN通过智能技术生成

如果您知道索引，值或文本。另外，如果您没有直接参考的ID。

这，这和这都是有用的答案。

标记示例

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

#1楼

对于选择的Jquery，如果您将属性发送给function并且需要update-select选项

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

#2楼

按值计算， jQuery 1.7对我有用的是以下代码，请尝试以下操作：

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

#3楼

我会去：-

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

#4楼

您可以只使用val()方法：

$('select').val('the_value');

#5楼

当我知道列表的索引时，就可以使用它。

$("#yourlist :nth(1)").prop("selected","selected").change();

这允许列表更改，并触发更改事件。 “：nth（n）”从索引0开始计数

#6楼

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

#7楼

回答我自己的文档问题。我敢肯定还有其他方法可以做到这一点，但这可以正常工作并且此代码已经过测试。

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

#8楼

$('select').val('the_value'); 看起来是正确的解决方案，如果您有数据表行，则：

$row.find('#component').val('All');

#9楼

使用jquery-2.1.4 ，我发现以下答案对我有用：

$('#MySelectionBox').val(123).change();

如果您有字符串值，请尝试以下操作：

$('#MySelectionBox').val("extra thing").change();

其他示例对我不起作用，因此这就是我添加此答案的原因。

我在以下位置找到了原始答案： https : //forum.jquery.com/topic/how-to-dynamic-select-option-in-dropdown-menu

#10楼

如果您不想使用jQuery，则可以使用以下代码：

document.getElementById("mySelect").selectedIndex = "2";

#11楼

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

#12楼

有很多方法可以做到这一点，但是最简洁的方法已经丢失了val()的顶级答案和大量参数。从jQuery 1.6开始，一些方法也发生了变化，因此需要更新。

对于以下示例，我将假设变量$select是一个指向所需<select>标记的jQuery对象，例如通过以下操作：

var $select = $('.selDiv .opts');

注意1-使用val（）进行值匹配：

对于值匹配，使用val()比使用属性选择器要简单得多： https : //jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

.val()的setter版本通过将匹配option的selected属性设置为相同的value在select标签上实现，因此在所有现代浏览器上都可以正常工作。

注意2-使用prop（'selected'，true）：

如果要直接设置选项的选定状态，则可以将prop （不是attr ）与boolean参数（而不是selected的文本值）一起使用：

例如https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

注意3-允许未知值：

如果使用val()选择<option> ，但是val不匹配（可能会根据值的来源而发生），则选择“ nothing”，并且$select.val()将返回null 。

因此，对于所示的示例，为了稳健起见，您可以使用类似https://jsfiddle.net/1250Ldqn/的内容：

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

注意4-文字完全匹配：

如果要按精确文本进行匹配，则可以使用带函数的filter 。例如https://jsfiddle.net/yz7tu49b/2/ ：

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

尽管如果您可能有多余的空格，则可能要像在检查中那样在检查中添加修剪

    return $.trim(this.text) == "some value to match";

注释5-按索引匹配

如果要按索引匹配，只需对选择的子项进行索引，例如https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

尽管现在我倾向于避免使用直接的DOM属性来支持jQuery，但要使用面向未来的代码，因此也可以通过https://jsfiddle.net/yz7tu49b/5/来完成：

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

注释6-使用change（）触发新选择

在上述所有情况下，change事件不会触发。这是设计使然，因此您不会遇到递归更改事件。

要生成更改事件，如果需要，只需.change()的调用添加到jQuery select对象。例如，第一个最简单的示例变为https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

还有很多其他使用属性选择器来查找元素的方法，例如[value="SEL2"] ，但是您必须记住，与所有其他选项相比，属性选择器相对较慢。

#13楼

谢谢你的问题。希望这段代码对您有用。

var val = $("select.opts:visible option:selected ").val();

#14楼

在设置触发选择时设置选择值：

$('select.opts').val('SEL1').change();

从范围设置选项：

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

此代码使用选择器来查找具有条件的选择对象，然后通过attr()更改选择的属性。

此外，我建议在将属性设置为selected之后添加change()事件，这样做代码将接近于更改用户的select。

#15楼

尝试这个

您只需使用选择字段ID而不是#id（即#select_name）

代替选项值，请使用选择选项值

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

#16楼

确实可以尝试以下方法

对于普通选择选项

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

对于选择2选项，触发选项需要使用

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>

#17楼

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

要么

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

#18楼

通过值获取中间期权元素的选择器是

$('.selDiv option[value="SEL1"]')

对于索引：

$('.selDiv option:eq(1)')

对于已知文本：

$('.selDiv option:contains("Selection 1")')

编辑：如上所述，OP可能是在更改下拉列表的选定项目之后。在1.6及更高版本中，建议使用prop（）方法：

$('.selDiv option:eq(1)').prop('selected', true)

在旧版本中：

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 ：在Ryan发表评论之后。 “选择10”上的匹配可能是不需要的。我没有找到匹配全文的选择器，但使用了过滤器：

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 ：对$(e).text()使用警告，因为它可能包含换行符，导致比较失败。当选项被隐式关闭（没有</option>标签）时，会发生这种情况：

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

如果仅使用e.text则将删除多余的空白，例如结尾的换行符，从而使比较更加可靠。

#19楼

上面的方法都没有提供我需要的解决方案，所以我认为我会提供对我有用的方法。

$('#element option[value="no"]').attr("selected", "selected");

#20楼

您可以命名选择并使用它：

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

它应该选择所需的选项。

p15097962069

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫