如何检查是否从 HTML 下拉列表中选择了一个项目？答案

【问题标题】：How to check if an item is selected from an HTML drop down list?如何检查是否从 HTML 下拉列表中选择了一个项目？
【发布时间】：2013-04-13 11:11:25
【问题描述】：

我有一个下拉列表，但我无法检查是否从下拉列表中选择了一个值

下面是我的 HTML 代码：

<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
    <option value="selectcard">--- Please select ---</option>
    <option value="mastercard">Mastercard</option>
    <option value="maestro">Maestro</option>
    <option value="solo">Solo (UK only)</option>
    <option value="visaelectron">Visa Electron</option>
    <option value="visadebit">Visa Debit</option>
</select><br/>

下面是我的 JavaScript 代码：

var card = document.getElementByName("cards")[0].value;
if (card.value == selectcard) {
    alert("Please select a card type");
}

【问题讨论】：

标签： javascript html drop-down-menu html-select

【解决方案1】：

你错过了字符串selectcard的引号，它应该是"selectcard"

if (card.value == selectcard)

应该是

if (card.value == "selectcard")

这是完整的代码

function validate()
{
 var ddl = document.getElementById("cardtype");
 var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "selectcard")
   {
    alert("Please select a card type");
   }
}

JS Fiddle Demo

【讨论】：

你的小提琴会检索选定的文本。他正在寻找的是，如果用户错过了选择，则获得警报以选择
@Mee 哦，对不起，只是误解了 OP。现在我已经更新了我的答案。
@Sachin 工作正常。 .text 对我来说看起来很奇怪，哈哈。好一个。 +1 ;D
对于同样的问题，在选择完成之前，我如何才能阻止其余的 JS 被执行？如您所知，警报后，其余代码将被执行。
@msc87 在您不想执行代码的行之前使用return; 语句，例如jsfiddle.net/cxmfk3zu

【解决方案2】：

<script>
var card = document.getElementById("cardtype");
if(card.selectedIndex == 0) {
     alert('select one answer');
}
else {
    var selectedText = card.options[card.selectedIndex].text;
    alert(selectedText);
}
</script>

【讨论】：

如果用户选择了第一项呢？那个“IS”索引为 0。

【解决方案3】：

您可以使用selectedIndex 属性检查所选值的索引是0还是-1。

在您的情况下，0 也不是有效的索引值，因为它是“占位符”：
<option value="selectcard">--- Please select ---</option>

LIVE DEMO

function Validate()
 {
   var combo = document.getElementById("cardtype");
   if(combo.selectedIndex <=0)
    {
      alert("Please Select Valid Value");
    }
 }

【讨论】：

如果用户选择了第一项呢？那个“IS”索引为 0。

【解决方案4】：

function check(selId) {
  var sel = document.getElementById(selId);
  var dropDown_sel = sel.options[sel.selectedIndex].text;
  if (dropDown_sel != "none") {

           state=1;

     //state is a Global variable initially it is set to 0
  } 
}


function checkstatevalue() {
      if (state==1) {
           return 1;
      } 
      return false;
    }

以html为例

<form name="droptest" onSubmit="return checkstatevalue()">

<select id='Sel1' onchange='check("Sel1");'>
  <option value='junaid'>Junaid</option>
  <option value='none'>none</option>
  <option value='ali'>Ali</option>
</select>

</form>

现在在提交表单时，首先检查 state 的值是什么，如果它是 0，则表示没有选择任何项目。

【讨论】：

【解决方案5】：

<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />

<script>
    var card = document.getElementById("cardtype");
    if (card.options[card.selectedIndex].value == 'selectcard') {
          alert("Please select a card type");
          return false;
    }
</script>

【讨论】：

【解决方案6】：

我相信这在所有方面都是最简单的，除非您以其他方式调用 validate 函数。对您的第一个选项使用 no/null/empty 值更容易验证。你也可以去掉第一个选项，从最流行的卡片类型开始。

<form name="myForm">
<select id="cardtype" name="cards">
<option value="">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />

<input type="submit" name="submit" class="button" value="SUBMIT" onmouseover="validate()"></form>

<script>
function validate() {
 if (document.myform.cards.value == "") {
    alert("Please select a card type");
    document.myForm.cards.focus();
}
</script>

【讨论】：

【解决方案7】：

Select select = new Select(_element);
List<WebElement> selectedOptions = select.getAllSelectedOptions();

if(selectedOptions.size() > 0){
    return true;
}else{
    return false;
}

【讨论】：