變化下拉

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
<label class=""> 
    <input type="radio" id="check1" name="ohradio" checked>bike 
</label> 
<label class=""> 
    <input type="radio" id="check2" name="ohradio">car 
</label> 
<label class=""> 
    <input type="radio" id="check3" name="ohradio">cycle 
</label> 
<br /><br /> 
<select id="firstDropdown" class=""> 
    <optgroup > 
     <option>bike 1</option> 
     <option>bike 2</option> 
     <option>bike 3</option> 
    </optgroup> 
</select> 
<br /><br /> 
<select id="secondDropdown" class="myHide"> 
    <optgroup > 
     <option>car 1</option> 
     <option>car 2</option> 
     <option>car 3</option> 
    </optgroup> 
</select> 
<br /><br /> 
<select id="thirdDropdown" class="myHide"> 
    <optgroup > 
     <option>cycle 1</option> 
     <option>cycle 2</option> 
     <option>cycle 3</option> 
    </optgroup> 
</select> 
<script src="js/jquery-3.1.1.min.js"></script> 
<script src="js/custom.js"></script> 
</body> 
</html>

在style.css代碼低於變化下拉

.myHide{ 
    display: none; 
} 
.myVisible{ 
    display: block; 
}

在custom.js代碼低於

$(document).ready(function(){ 
    if(check2.checked){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myVisible'); 
     $('#thirdDropdown').addClass('myHide'); 
    } 
    if(check3.checked){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myHide'); 
     $('#thirdDropdown').addClass('myVisible'); 
    } 
});

我想改變下拉列表，當用戶選擇一個被顯示不同的單選按鈕，例如當他們點擊自行車單選按鈕時，應該顯示自行車下拉菜單，並且應該隱藏其他下拉菜單。但是，上面的代碼不起作用。我是jquery的初學者。

來源

2016-11-09 R K

你應該添加一個事件監聽器，火是選擇任何複選框時，然後隱藏或顯示相應。 –

戴上無線電在代碼中更改事件。只要改變你的JavaScript腳本

$(document).ready(function(){ 
    $("input[type=radio]").change(function(){ 
    $("select").removeClass('myVisible myHide'); 
    if(check1.checked){ 
     $('#firstDropdown').addClass('myVisible'); 
     $('#secondDropdown').addClass('myHide'); 
     $('#thirdDropdown').addClass('myHide'); 
    } 
    if(check2.checked){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myVisible'); 
     $('#thirdDropdown').addClass('myHide'); 
    } 
    if(check3.checked){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myHide'); 
     $('#thirdDropdown').addClass('myVisible'); 
    } 
    }); 

});

觀看演示https://jsbin.com/lihusikoye/edit?html,css,js,output

來源

2016-11-09 12:56:25

您的輸出是正確的，但問題是第2和第3下拉列表需要額外的空間。 –

這是因爲
，刪除
然後多餘的空間將被刪除。 –

是的，幫助了很多，謝謝。 –

試試這個，

$("input[type=radio]").change(function(){ 
    if($("#check2").attr("checked")=="checked") { 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myVisible'); 
     $('#thirdDropdown').addClass('myHide'); 
    } 
    if($("#check3").attr("checked")=="checked") { 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myHide'); 
     $('#thirdDropdown').addClass('myVisible'); 
    } 
});

在一些jQuery的版本attr mehtod沒有作用。爲此你必須使用prop

來源

2016-11-09 07:51:55

這根本不起作用。 –

你似乎誤解了這個問題。當收音機改變時，OP想要改變可見的元素。OP目前擁有的'if'語句是好的 –

我想知道，它不工作，但在短短的2秒內得到了upvote ..範圍 –

應該是;

$(document).ready(function(){ 
    if($('#check2').is(':checked'){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myVisible'); 
     $('#thirdDropdown').addClass('myHide'); 
    } 
    if($('#check3').is(':checked')){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myHide'); 
     $('#thirdDropdown').addClass('myVisible'); 
    } 
});

來源

2016-11-09 07:53:47 Laazo

這不會改變任何東西 - OPs'if'語句正確 –

您可以將電臺改爲`

<label class=""> 
    <input type="radio" id="check1" name="ohradio" data-show="firstDropdown"  checked>bike 
</label> 
<label class=""> 
    <input type="radio" id="check2" name="ohradio" data-show="secondDropdown">car 
</label> 
<label class=""> 
    <input type="radio" id="check3" name="ohradio" data-show="thirdDropdown">cycle 
</label>

，改變你的腳本

$(document).on("change", "input[name='ohradio']", function() { 
    $("select").fadeOut(); 
    $("#"+$(this).data("show")).fadeIn(); 
});

來源

2016-11-09 08:28:31

此代碼應該是完全的真理：

$(document).ready(function(){ 
    $("input[type='radio']").change(function(){ 
    $("select").removeClass("myVisible"); 
    if($('#check1').is(':checked')){ 
     $('#firstDropdown').addClass('myVisible'); 
     $('#secondDropdown').addClass('myHide'); 
     $('#thirdDropdown').addClass('myHide'); 
    } 
    if($('#check2').is(':checked')){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myVisible'); 
     $('#thirdDropdown').addClass('myHide'); 
    } 
    if($('#check3').is(':checked')){ 
     $('#firstDropdown').addClass('myHide'); 
     $('#secondDropdown').addClass('myHide'); 
     $('#thirdDropdown').addClass('myVisible'); 
    } 
    }); 
});

實現更改監聽器input[type='radio']
每次單擊一個輻射按鈕時，必須從所有選擇框中刪除類myVisible。
當check1被選中時也設置類。

還有一個較短的代碼解決方案，但如果你是初學者，這是更好的理解和學習。

短，更靈活：

更改ID對選擇框是這樣的：

<select id="sel_check1" class="myVisible"> 
    <optgroup > 
    <option>bike 1</option> 
    <option>bike 2</option> 
    <option>bike 3</option> 
    </optgroup> 
</select> 

<select id="sel_check2" class="myHide"> 
    <optgroup > 
    <option>car 1</option> 
    <option>car 2</option> 
    <option>car 3</option> 
    </optgroup> 
</select> 

<select id="sel_check3" class="myHide"> 
    <optgroup > 
    <option>cycle 1</option> 
    <option>cycle 2</option> 
    <option>cycle 3</option>  
    </optgroup> 
</select>

然後你只需要爲JS代碼：

$(document).ready(function(){ 
    $("input[type='radio']").change(function(){ 
    $("select").removeClass("myVisible").addClass("myHide");    
    $("#sel_"+$(this).attr("id")).addClass("myVisible").removeClass("myHide"); 
    }); 
});

來源

2016-11-09 08:45:04 zuluk

回答

相關問題