验证如果复选框被点击，选择下拉菜单

Question

我面临验证列表中下拉菜单的问题。有一个复选框和相应的选择框列表，如果一个<li>中的特定复选框被选中，则相应的选择框应该有一个选定的值，否则抛出和错误。请帮助....

的HTML代码如下...

<ul> 
<li><input type="checkbox" name="status" /> 
    <select name="select1a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select1b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 
<li><input type="checkbox" name="status" /> 
    <select name="select2a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select2b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 
<li><input type="checkbox" name="status" /> 
    <select name="select3a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select3b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 
</ul> 
<input type="submit" name="Approve" /> 

感谢....

Answer 1

一种选择是使用JavaScript。在复选框标签中放置onclick事件处理程序。当复选框被更改时，onclick事件将被触发。从那里你可以做你需要做的事情来验证下拉列表。此外，如果您提供表单元素标识，则会更容易。这是一个例子。语法可能会稍微偏离一点。

<script type="text/javascript"> 
    function validateSelect1Lists(checked) { 
     if(checked && document.getElementById('select1a').selectedIndex > -1) { 
       // Do some validation 
     } 
    } 
</script> 


<li> 
    <input type="checkbox" name="status" id="status" onclick="validateSelect1Lists(this.checked);" /> 
    <select name="select1a" id="select1a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select1b" id="select1b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 

Answer 2

此如果我已经尝试了..我成功地验证了复选框，但是，如果选择了该复选框，则用户必须选择与此对应的下拉列表中选择代码..我附上代码以下...

jQuery('#approve').click(function(){ 
    if(status == 1) 
    { 
    if (jQuery('input[type="checkbox"]:checked').size() == 0) 
     { 
     alert('Please choose an option'); 
     return false; 
     } 
     else 
     { 
     return true; 
     }   
    } 
    else if (status == 0) 
    { 
    return true; 
    } 
    });