TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊
正如您所說的組合框，您可以使用wijmo庫和代碼（全屏測(cè)試片段）和JSfiddle
onload = function() {
// create some random data
var names = 'primary,warning,danger'.split(','),
data = [];
for (var i = 0; i < names.length; i++) {
data.push({
name: names[i]
});
}
var theComboString = new wijmo.input.ComboBox('#theComboString', {
selectedIndexChanged: function(s, e) {
setText('theComboStringCurrent', s.text);
},
itemsSource: names
});
// show text in an element on the page
function setText(id, value) {
document.getElementById(id).textContent = value;
if(value=="primary")
{
$("#theComboString").css("background-color","green");
}
if(value=="danger")
{
$("#theComboString").css("background-color","red");
}
if(value=="warning")
{
$("#theComboString").css("background-color","orange");
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
<h1>
ComboBox
</h1>
<label for="theComboString">Strings:</label>
<div id="theComboString"></div>
<p>
The current value is: <b id="theComboStringCurrent"></b>.
</p>
</div>
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
在您的 CSS 中，您可以執(zhí)行以下操作：
（如果您使用單選按鈕）：
.input[type="radio"]:checked {
background-color: blue;
}
（如果您使用下拉菜單）：
option:checked {
background: red;
}
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊
您可以使用 plain 來做到這一點(diǎn)javascript。
我在代碼中添加注釋以進(jìn)行解釋。
// Select the dropdown color selector.
var colorSelect = document.querySelector("#colors");
// Add a function to run, each time a new option(color) is selected.'
colorSelect.addEventListener("change", changeColor);
// Run the function from the previous event listener.
// The function get the color with "this.value", where this is the selected value.
// This works since each option has a value in the markup, otherwise you had to get the text value.
// Then it sets the background color of the body to the selected color.
function changeColor() {
var selectedValue = this.value;
document.body.style.backgroundColor = selectedValue;
}
<select name="colors" id="colors">
<option value=""></option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select>
更新的答案
var box = document.querySelector(".box");
var colorSelect = document.querySelector("#colors");
colorSelect.addEventListener("change", changeColor);
function changeColor() {
var selectedColor = this.value;
var selectedType = colorSelect.options[colorSelect.selectedIndex].text;
box.style.backgroundColor = selectedColor;
box.innerHTML = selectedType;
}
.box {
height: 20px;
width: 200px;
}
<div class="box"></div>
<select name="colors" id="colors">
<option value=""></option>
<option value="red">Danger</option>
<option value="yellow">Warning</option>
<option value="green">Success</option>
</select>
舉報(bào)