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

Question

我希望能够选择（又称为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);

- Code Guy

---

“then it should change to 2 item in the list”的意思是什么？ - ibrahim mahrir

有3个项目，它们的值都相同。但是文本不同。还有一个变量selectvar。根据selectvar的值选择1、one或o-ne中的哪一个。例如，如果selectvar为“d”，则运行代码后应选择one而不是1或o-ne。正确的代码应该是什么？ - Code Guy

@CodeGuy，我认为这个想法是只显示一组3个相等的值（请看样式属性中的“display-none”）。不过我认为他应该使用三个不同的<select>标签。 - Alexis Wilke

Answer 1

使用以下代码并为您的选择框指定id。

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

- Sumit Gulati

---

之前我理解错了。现在这个可以正常工作了。我试过了。 - Sumit Gulati

如果答案对您有用，请 @CodeGuy 接受它。 - Sumit Gulati

让我们在聊天中继续这个讨论。 - Sumit Gulati

Answer 2

设定选定的变量-然后迭代选择列表选项并比较数据属性-如果相同，则设置选中的属性。

（注意：文本中的“teh”应为“the”）

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>

- gavgrif

---

你不能在<select>中选择多个项目，对吧？那段代码没有意义，你应该使用jQuery过滤器搜索selectvar。 - Alexis Wilke

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>

- ibrahim mahrir