亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在多選類型的用戶所選選項上動態添加輸入字段

如何在多選類型的用戶所選選項上動態添加輸入字段

慕無忌1623718 2022-08-18 09:41:28
我正在使用具有多個屬性的選擇類型,并希望顯示與所選選項一樣多的輸入字段,如果所選選項未選中,但代碼的輸出僅顯示一個輸入字段,則刪除輸入字段。這是代碼function check(skill) {  if (skill.value == "css") {    document.getElementById("css").style.display = "block";  } else {    document.getElementById("css").style.display = "none";  }  if (skill.value == "php") {    document.getElementById("php").style.display = "block";  } else {    document.getElementById("php").style.display = "none";  }  if (skill.value == "magento") {    document.getElementById("magento").style.display = "block";  } else {    document.getElementById("magento").style.display = "none";  }}<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" style="display: none;">  <label for="sel1"></label><input type="text" name="css" id="selc1"></div><div id="php" style="display: none;">  <label for="sel2"></label><input type="text" name="php" id="selc2"></div><div id="magento" style="display: none;">  <label for="sel3"></label><input type="text" name="magento" id="selc3"></div>
查看完整描述

1 回答

?
aluckdog

TA貢獻1847條經驗 獲得超7個贊

使用 jquery 獲取多選的值。這將返回一個數組。相反,在內聯樣式上,使用類來隱藏所有元素。使用另一個類來定位輸入。選擇選項時,循環訪問元素具有此類并獲取其id以檢查多選數組是否具有此類。如果數組具有此 ID ,則表示選擇了該選項,然后用于刪除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>


查看完整回答
反對 回復 2022-08-18
  • 1 回答
  • 0 關注
  • 110 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號