如何检查是否从HTML下拉列表中选择了项目
How to check if an item is selected from an HTML drop down list?
我有一个下拉淹没列表,在检查是否从下拉列表中选择了值时遇到问题
下面是我的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");
}
您的字符串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演示
<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>
您可以使用selectedIndex
属性检查所选值的索引是0还是-1
在您的情况下,0也不是有效的索引值,因为它是"占位符":<option value="selectcard">--- Please select ---</option>
实时演示
function Validate()
{
var combo = document.getElementById("cardtype");
if(combo.selectedIndex <=0)
{
alert("Please Select Valid Value");
}
}
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,则意味着没有选择任何项目。
<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>
我相信这在所有方面都是最简单的,除非您通过其他方式调用validate函数。如果您的第一个选项没有/null/空值,则更容易验证。你也可以去掉第一个选项,从最流行的卡片类型开始。
<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>
function checkSelected() {
if (optionsId.selectedIndex < 0) {
alert("Please select an item from options");
return false;
}}
Select select = new Select(_element);
List<WebElement> selectedOptions = select.getAllSelectedOptions();
if(selectedOptions.size() > 0){
return true;
}else{
return false;
}
相关文章:
- javascript和html图像下拉列表
- 如何在 HTML 下拉列表中制作锚标记
- 数据和HTML下拉列表
- 在html中显示任一下拉列表
- 在Moqui中,如何在html.ftl中加载数据库表数据作为下拉列表
- 需要在 html 中使用两个下拉列表来显示不同的 json 值
- HTML 表单字段根据从下拉列表中选择的选项显示/隐藏
- HTML 下拉列表所选值
- 只有在HTML表单中选择了某个下拉列表时,才需要字段
- html形式的下拉列表
- 有角度的自动建议文本排版和html ul li下拉列表
- 如何根据HTML下拉列表中的数量选择来计算价格
- 从php中的mysql中复制带有嵌入式下拉列表的html表单javascript
- JS下拉列表没有'不能在复制的HTML源中工作
- 从 html.append 追加的 html 下拉列表中获取返回值
- 在选择其他下拉列表html和javascript araray的基础上,填充3个连续的下拉列表
- 使用 SQL 信息更新选择下拉列表 (HTML)
- 层次结构和多选项下拉列表(HTML),并在项目之间导航(子节点)
- 显示选项与复选框下拉列表- HTML/JAVASCRIPT
- Chrome中的AJAX下拉列表(HTML Select)