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

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

JavaScript 檢查 Select 選項(xiàng)是否被選中

JavaScript 檢查 Select 選項(xiàng)是否被選中

瀟湘沐 2021-11-25 16:42:00
我在表單頁面上有一個(gè) select 元素，如果用戶嘗試提交而不進(jìn)行選擇，我希望更改標(biāo)簽的內(nèi)部 html。這是html。  <div class="form-group">    <label for="FamilySize" name = "FamSizeLable">How Many in Your Household</label>    <select class="form-control" name = "FamilySize" id="FamilySize">      <option disabled selected value="">Size</option>      <option>1</option>      <option>2</option>      <option>3</option>      <option>4</option>      <option>5</option>      <option>Good god ya'll</option>    </select>  </div>我嘗試過以幾種不同的方式獲取價(jià)值。  else if(!document.getElementById("FamilySize").value){    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";    document.getElementById("FamSizeLabel").style.color = "red";    return false;  }和  else if(!document.querySelector('[id = "FamilySize"]').value){    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";    document.getElementById("FamSizeLabel").style.color = "red";    return false;  }和  else if(document.querySelector('[id = "FamilySize"]').value==null){    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";    document.getElementById("FamSizeLabel").style.color = "red";    return false;  }和  else if(document.querySelector('[id = "FamilySize"]').value==""){    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";    document.getElementById("FamSizeLabel").style.color = "red";    return false;  }我還嘗試在開發(fā)人員視圖中使用 console.log 來查看我遺漏了什么。但是，我對 JavaScript 非常菜鳥，似乎無法確定它。當(dāng)未選擇 FamilySize 時(shí)，表單仍會被提交。我可以抓住這個(gè)服務(wù)器端，但我正在努力在 JavaScript 方面變得更好，所以想弄清楚/理解這一點(diǎn)。
查看完整描述

3 回答

?
肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

我已經(jīng)編輯了我的原始帖子并包含了您的一些進(jìn)一步輸入元素。我目前使用該類form-control來決定必須檢查哪些元素（您當(dāng)然可以使用專門用于此目的的另一個(gè)類名）。然后我去使用Array.reduce()返回整體布爾值的方法檢查它們。根據(jù)該值，進(jìn)一步處理是否會發(fā)生......


為了簡化錯(cuò)誤處理，我使用每個(gè)測試變量的名稱作為錯(cuò)誤消息，我在每個(gè)輸入元素之后的額外 div 中顯示該錯(cuò)誤消息。


var chk=Array.from(document.querySelectorAll('.form-control')),

    msg="You must enter a value for ";


document.querySelector('#subm').addEventListener('click',

 function(){

 if (chk.reduce(function(ac,el){

   el.parentNode.querySelector('div.error').innerHTML=

     el.value=="" ? msg+el.name : "";

   return ac || el.value==""},

   false)) return false;

 console.log('OK, your data will be submitted ...');

 // and further code ...

})

div.error {color: red;}

<div class="form-group">

    <label id = "EmailLabel" >Email address</label>

    <input type="email" class="form-control" name="Email" 

     autocomplete = "off" autofocus id="FormControlInput1"

     placeholder="name@example.com"><div class="error"></div>

  </div>

  <div class="form-group">

    <label id = "Fname" >First Name</label>

    <input type="text" class="form-control" name = "Fname" autocomplete = "off"  id="FnameFormControlInput" placeholder="John"><div class="error"></div>

  </div>

  <div class="form-group">

    <label id = "Lname" >Last Name</label>

    <input type="text" class="form-control" name ="Lname" autocomplete = "off"  id="LnameFormControlInput" placeholder="Doe"><div class="error"></div>

  </div>

  <div class="form-group">

    <label for="FamilySize">How Many in Your Household</label>

    <select class="form-control" name="FamilySize" id="FamilySize">

      <option disabled selected value="">Size</option>

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

      <option>5</option>

      <option>Good god ya'll</option>

    </select><div class="error"></div>

  </div>

  <div class="form-group">

    <label for="AgeGroup">Select Age Group</label>

    <select multiple class="form-control" name="AgeGroup" id="AgeGroup">

      <option>0-15</option>

      <option>16-24</option>

      <option>25-36</option>

      <option>37-45</option>

      <option>45-Dead</option>

    </select><div class="error"></div>

  </div> 

  <button id="subm">submit</button>


查看完整回答
反對 回復(fù) 2021-11-25
?
躍然一笑

TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊

要訪問選定的元素值或它的innerHTML，可以使用以下方法：


var e = document.getElementById("FamilySize");

// For the option tag value attribute:

var value = e.options[e.selectedIndex].value;

// For the option text:

var text = e.options[e.selectedIndex].text;

getElementsByName 方法沒有單一選項(xiàng)。要訪問標(biāo)簽的內(nèi)容，您應(yīng)該使用：


var labelInnerHTML = document.getElementsByName("FamSizeLable")[0].innerHTML

另請注意，您的代碼中有拼寫錯(cuò)誤：


name = "FamSizeLable"

應(yīng)該：


name = "FamSizeLabel"


查看完整回答
反對 回復(fù) 2021-11-25
?
智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

我終于通過給我的標(biāo)簽一個(gè) id 解決了這個(gè)問題


  <div class="form-group">

  <label for="FamilySize" name = "FamSizeLable" id = "FamSizeLable">How Many in Your Household</label>

  <select class="form-control" name="FamilySize" id="FamilySize">

      <option disabled selected value="">Size</option>

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

      <option>5</option>

      <option>Good god ya'll</option>

    </select>

  </div>

然后修改我的 JavaScript 以選擇選擇器的 id 并檢查值""：


  else if(document.querySelector('#FamilySize').value==""){

    //Here the # means id

    document.querySelector('#FamSizeLable').innerHTML = "***You Must Select a Family Size***";

    document.querySelector('#FamSizeLable').style.color = "red";

    return false;

  }


查看完整回答
反對 回復(fù) 2021-11-25
  • 3 回答
  • 0 關(guān)注
  • 519 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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