1 回答

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個(gè)贊
使用 jquery 獲取多選的值。這將返回一個(gè)數(shù)組。相反,在內(nèi)聯(lián)樣式上,使用類來隱藏所有元素。使用另一個(gè)類來定位輸入。選擇選項(xiàng)時(shí),循環(huán)訪問元素具有此類并獲取其id以檢查多選數(shù)組是否具有此類。如果數(shù)組具有此 ID ,則表示選擇了該選項(xiàng),然后用于刪除valhidetechInputtechInputidremoveClasshide
function check(skill) {
const selectedSkils = $(skill).val();
$('.techInput').each(function(i, v) {
if (selectedSkils.indexOf($(v).attr('id')) !== -1) {
$(v).removeClass('hide');
} else {
$(v).addClass('hide')
}
})
}
.hide {
display: none;
}
.techInput {
margin: 5px;
padding: 5px;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="skills[]" id="skills" multiple onchange="check(this);">
<option value="css">css</option>
<option value="php">php</option>
<option value="magento">magento</option>
</select>
<div id="css" class='hide techInput'>
<label for="sel1"></label><input type="text" name="css" id="selc1" placeholder='css'>
</div>
<div id="php" class='hide techInput'>
<label for="sel2"></label><input type="text" name="php" placeholder='php' id="selc2">
</div>
<div id="magento" class='hide techInput'>
<label for="sel3"></label><input placeholder='magento' type="text" name="magento" id="selc3">
</div>
添加回答
舉報(bào)