根据其数据属性值选择一个选项

问题描述：

我想选择（又名jquery预选）并根据数据变量设置值。该列表具有3个具有相同值但不同数据的项目-d。根据其数据属性值选择一个选项

假设我有变量selectvar =“d”，那么它应该更改为列表中的2个项目。

 <select id="select2"> 
    <option data-id="mo" value="1" style="display: none;">1</option> 
    <option data-id="d" value="1" style="">one</option> 
    <option data-id="h" value="1" style="display: none;">o-ne</option> 
    <option data-id="mo" value="2" style="display: none;">2</option> 
    <option data-id="d" value="2" style="">two</option> 
    <option data-id="h" value="2" style="display: none;">t-wo</option> 
    <option data-id="mo" value="3" style="display: none;">3</option> 
    <option data-id="d" value="3" style="">three</option> 
    <option data-id="h" value="3" style="display: none;">t-hree</option> 
    </select> 

val = 2 
selectvar="d" 
$("#select2 option[data-id='d'][value='2']").prop("selected", true);

_then它应该改变为2列表中的项目是什么意思_ ??? –

共有3项，全部具有相同的值。但文字是不同的。还有一个变量selectvar。根据selectvar的值select，我们必须选择1或1或one中的哪一个。例如，selectvar具有“d”，这就是为什么在运行代码之后，它应该选择一个而不是1或o-ne。什么应该是正确的代码？ –

答

下面的代码使用，并给予编号，以你的选择。

$("#select2 option[data-id='" + selectvar + "']").prop("selected", true);

@CodeGuy我刚更新了代码。 –

早些时候，我了解了别的东西。这工作正常。我试过了。 –

@CodeGuy如果能为您正常工作，请接受答案。 –

答

设置选择的变量 - 然后遍历德选择列表中选择和比较数据属性 - 它是相同的 - 组选属性。

var selectvar = "d"; 
 

 

 
$("#select2 option").each(function(){ 
 
    var id= $(this).attr('data-id'); 
 
    if(id === selectvar){ 
 
     $(this).prop('selected',true); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select2"> 
 
    <option data-id="mo" value="1">1</option> 
 
    <option data-id="d" value="2" >one</option> 
 
    <option data-id="h" value="3">o-ne</option> 
 
</select>

谢谢，任何短代码可能？ –

答

$("button").click(function() { 
 
    var selectVal = $("input").val(); 
 
    
 
    $('[data-id="' + selectVal + '"]').prop("selected", true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option data-id="mo" value="1" style="display: none;">1</option> 
 
    <option data-id="d" value="1" style="">one</option> 
 
    <option data-id="h" value="1">o-ne</option> 
 
</select> 
 
Data-id:<input/> <button>Change</button>

根据其数据属性值选择一个选项

相关推荐