如何使用單選按鈕與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中的選擇列表

回答

相關問題