根據其數據屬性值選擇一個選項

我想選擇（又名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);

來源

2017-04-08 Code Guy

_then它應該改變爲2列表中的項目是什麼意思_ ??? –

共有3項，全部具有相同的值。但文字是不同的。還有一個變量selectvar。根據selectvar的值select，我們必須選擇1或1或one中的哪一個。例如，selectvar具有「d」，這就是爲什麼在運行代碼之後，它應該選擇一個而不是1或o-ne。什麼應該是正確的代碼？ –

下面的代碼使用，並給予編號，以你的選擇。

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

來源

2017-04-08 02:49:42

@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>

來源

2017-04-08 02:46:18 gavgrif

謝謝，任何短代碼可能？ –

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

來源

2017-04-08 02:47:11

根據其數據屬性值選擇一個選項

回答

相關問題