如何使用单选按钮与HTML中的选择列表

-1

您好我有一个小的问题，在HTML网页形式。我想制作一个网页表单，用户可以选择午餐选项，单选按钮“是”和“否”。如果“是”，则选择列表将激活并且用户可以选择午餐菜单。如何使用单选按钮与HTML中的选择列表

来源

2015-07-12 Sohaib Atif

欢迎来到Stack Overflow。在目前的状态下，你的问题非常广泛：这个问题有很多好的答案。除此之外，网络上已经有这样的内容了。先看看其他类似的问题。如果您仍然希望我们为您提供帮助，请提供一些您迄今尝试过的代码。 – jaunt

我正在寻找这个简单问题的代码 –

Stack Overflow不是一个免费的编码服务。请至少做一些基本的尝试来解决您自己的问题，然后我们可以帮助解决您遇到的任何特定问题。 – MarsAtomic

试试这个代码，

的jsfiddle https://jsfiddle.net/codotronix/hwssvzu4/

HTML

 Want to have lunch? <br/>  
     <input type="radio" name="lunchOP" id="yesRadio" value="yes" checked="checked">Yes 
     <input type="radio" name="lunchOP" value="no">No 
     <br/> 
     <select id="lunchOptions"> 
      <option>Lunch 1</option> 
      <option>Lunch 2</option> 
      <option>Lunch 3</option> 
      <option>Lunch 4</option> 
     </select>

jQuery的

$('input[type="radio"]').on('change', function(){ 
    if($('#yesRadio').is(':checked')) { 
     $('#lunchOptions').show(); 
    } else { 
     $('#lunchOptions').hide(); 
    } 
})

如果选择是，午餐地点选择框将是可见的，否则不是。

如果您想要与此不同的东西，请在评论中解释。

谢谢。

来源

2015-07-12 18:33:11

看看这个fiddle。

我已经使用jQuery，这使得它很容易实现。

以下是摘录。

$('.lunch').click(function() { 
 
    $('#food').show(); 
 
    if ($(this).val() == 1) { 
 
    $('#food').removeAttr("disabled"); 
 
    } else { 
 
    $('#food').attr("disabled", "disabled"); 
 
    } 
 
});

#food { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
Do you want Lunch ? 
 
<br> 
 
<input type="radio" name='lunch' value="1" class='lunch' />YES 
 
<br> 
 
<input type="radio" name='lunch' value="0" class='lunch' />NO 
 
<br> 
 
<select id='food'> 
 
    <option>PIZZA</option> 
 
    <option>BURGER</option> 
 
    <option>SAMOSA</option> 
 
    <option>KACHORI</option> 
 
    <option>POHE</option> 
 
    <option>DOSA</option> 
 
</select>

来源

2015-07-12 18:34:49

感谢大家现在的工作，感谢所有:) –

这是一个很好的做法，“接受”有用的答案，因为它可以帮助未来访问此问题的每个人。 –

JavaScript解决方案。

看来你是js的新手，所以看看这个堆栈溢出链接，它肯定会帮助你，因为它有简单的javascript解决方案。

Show/hide drop down when radio button is selected

来源

2015-07-12 18:38:13

如何使用单选按钮与HTML中的选择列表

回答

相关问题