取決於使用jQuery

這HTML代碼取決於使用jQuery

<label class="col-lg-6">37.sample 1 </label> 
<select class="form-control" id="colorchg"> 
    <option></option> 
    <option value="green">YES</option> 
    <option value="red">NO</option> 
    <option value="gray">N/A</option> 
</select> 

<label class="col-lg-6">38. sample 2</label> 
<select class="form-control" id="colorchg"> 
    <option></option> 
    <option value="green">YES</option> 
    <option value="red">NO</option> 
    <option value="gray">N/A</option> 
</select> 

<label class="col-lg-6">39. sample 3</label> 
<select class="form-control" id="colorchg"> 
    <option></option> 
    <option value="green">YES</option> 
    <option value="red">NO</option> 
    <option value="gray">N/A</option> 
</select>

HTML輸出

值更改下拉列表的背景色：

腳本

$(document).ready(function() { 
    $("#colorchg").each(function() { 
    var color = $("#colorchg").val(); 
    $(this).css("background", color); 
    }); 
    $("#colorchg").change(function() { 
    var color = $("#colorchg").val(); 
    $(this).css("background", color); 
    }); 
});

但它只是改變第一個實例的bg-color

腳本應如何更改才能在每個下拉列表中實現

來源

2017-10-04 mr.howtocode

看起來像一個重複：https://stackoverflow.com/q/34882354/1531971 – jdv

使用的一類 - IDS是爲了是唯一的，如這樣的jquery只會將它找到的第一個對象與該id相區別並忽略所有其他對象。 Id =標識符，如果它與其他東西相同，則不能識別某些東西 – Pete

試試這個：

$(document).ready(function() { 
 
    $(".colorchg").each(function() { 
 
    $(this).css("background", $(this).val()); 
 
    }); 
 
    $(".colorchg").change(function() { 
 
    $(this).css("background", $(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="col-lg-6">37.sample 1 </label> 
 
<select class="form-control colorchg"> 
 
    <option></option> 
 
    <option value="green">YES</option> 
 
    <option value="red">NO</option> 
 
    <option value="gray">N/A</option> 
 
</select> 
 

 
<label class="col-lg-6">38. sample 2</label> 
 
<select class="form-control colorchg"> 
 
    <option></option> 
 
    <option value="green">YES</option> 
 
    <option value="red">NO</option> 
 
    <option value="gray">N/A</option> 
 
</select> 
 

 
<label class="col-lg-6">39. sample 3</label> 
 
<select class="form-control colorchg"> 
 
    <option></option> 
 
    <option value="green">YES</option> 
 
    <option value="red">NO</option> 
 
    <option value="gray">N/A</option> 
 
</select>

通過使用類，jQuery將發現多了一個元素使用。 ID的需要是唯一的，所以它認爲它只有一個元素。

而不是在函數中再次搜索值，您應該使用this，否則背景將更改爲第一個選項設置爲。

來源

2017-10-04 14:49:44

非常感謝你的工作！ –

不能在頁面上多次使用相同的ID - ID必須是唯一的。如果你試圖找到它，它只會得到第一個，因爲只有一個應該存在。而是使用類.form-control作爲選擇器。

來源

2017-10-04 14:47:24 will

不知道。感謝非常感謝的信息！ –

id需要是唯一的。除了創建一個通用函數並觸發該函數onchange的select。值val()將給當前選定的選項。使用該值作爲CSS屬性值

function changeBck(elem) { 
 
    $(elem).css("background", $(elem).val()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="col-lg-6">37.sample 1 </label> 
 
<select class="form-control" id="colorchg_1" onchange='changeBck(this)'> 
 
    <option></option> 
 
    <option value="green">YES</option> 
 
    <option value="red">NO</option> 
 
    <option value="gray">N/A</option> 
 
</select> 
 

 
<label class="col-lg-6">38. sample 2</label> 
 
<select class="form-control" id="colorchg_2" onchange='changeBck(this)'> 
 
    <option></option> 
 
    <option value="green">YES</option> 
 
    <option value="red">NO</option> 
 
    <option value="gray">N/A</option> 
 
</select> 
 

 
<label class="col-lg-6">39. sample 3</label> 
 
<select class="form-control" id="colorchg_3" onchange='changeBck(this)'> 
 
    <option></option> 
 
    <option value="green">YES</option> 
 
    <option value="red">NO</option> 
 
    <option value="gray">N/A</option> 
 
</select>

來源

2017-10-04 14:53:31 brk

感謝您的另一種方式！ –

取決於使用jQuery

回答

相關問題