第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在多選類型的用戶所選選項(xiàng)上動(dòng)態(tài)添加輸入字段

如何在多選類型的用戶所選選項(xiàng)上動(dòng)態(tài)添加輸入字段

慕無忌1623718 2022-08-18 09:41:28
我正在使用具有多個(gè)屬性的選擇類型,并希望顯示與所選選項(xiàng)一樣多的輸入字段,如果所選選項(xiàng)未選中,但代碼的輸出僅顯示一個(gè)輸入字段,則刪除輸入字段。這是代碼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貢獻(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>


查看完整回答
反對 回復(fù) 2022-08-18
  • 1 回答
  • 0 關(guān)注
  • 106 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號