Question

我想选择（也就是jQuery preselect）并根据数据变量设置值。该列表有3个具有相同值但不同数据的项目。

假设我有变量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);

Answer 1

使用以下代码并为您的选择提供ID。

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

Answer 2

设置所选变量 - 然后迭代选择列表选项并比较数据属性 - 它相同 - 设置所选属性。

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>

Answer 3

$("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>

根据数据属性的值选择选项

3 个答案: