Я попытался показать и спрятать в jquery в onload, но он не показал, может ли кто-нибудь посмотреть и предоставить решение. Я просто сделал onclick из списка переключателей, который хочет отображать.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).load = function () {
$("#main input[name='B']").click(function () {
alert("hiiii");
if ($('input[name=B]:checked').val() == "country") {
alert("country");
$("#country").show();
$("#state,#city").hide();
}
if ($('input[name=B]:checked').val() == "state") {
alert("state");
$("#state").show();
$("#country,#city").hide();
}
if ($('input[name=B]:checked').val() == "city") {
alert("city");
$("#city").show();
$("#country,#state").hide();
}
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="2">
<tr>
<td>
<input type="radio" name="B" value="country">
</td>
<td>Country</td>
<td>
<input type="radio" name="B" value="state">
</td>
<td>State</td>
<td>
<input type="radio" name="B" value="city">
</td>
<td>City</td>
</tr>
</table>
Productline:
<select id="productline">
<option value="Motorcycles">Motorcycles</option>
<option value="Planes">Planes</option>
<option value="Ships">Ships</option>
<option value="Trains">Trains</option>
</select>
<select id="country">
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="Canada">Canada</option>
<option value="Denmark">Denmark</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
<select id="state">
<option value="BC">BC</option>
<option value="CA">CA</option>
<option value="CT">CT</option>
<option value="Isle of Wight">Isle of Wight</option>
<option value="MA">MA</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NSW">NSW</option>
<option value="NV">NV</option>
</select>
<select id="city">
<option value="Allentown">Allentown</option>
<option value="Århus">Århus</option>
<option value="Auckland  ">Auckland  </option>
<option value="Barcelona">Barcelona</option>
<option value="Bergamo">Bergamo</option>
<option value="Bergen">Bergen</option>
<option value="Boston">Boston</option>
<option value="Bräcke">Bräcke</option>
<option value="Brickhaven">Brickhaven</option>
<option value="Bridgewater">Bridgewater</option>
<option value="Brisbane">Brisbane</option>
<option value="Bruxelles">Bruxelles</option>
</select>
</body>
Это неправильный синтаксис:
$(window).load =function()
правильный:
$(window).load(function()
Но мое предложение - использовать его на $(function(){});
документ готов.
Поэтому вы можете попробовать следующее:
добавьте id #main
в таблицу:
<table cellpadding="0" cellspacing="0" border="2" id="main">
//-------------------------------here----------^^^^^^^^
$(function(){ // <----document ready function shorter version
$("#main :radio").on('change', function(){ // <---apply change event
$('#'+this.value).show(); //<---show the target
if($(e.target).val() == 'country'){
$('#'+this.value).siblings('select:not(#productline)').hide();
} //--^----------------------------------^hide only if country is checked
});
});
$('#'+this.value).show().siblings('select').hide();
обновить эту строку.
Вы усложняете ситуацию, не теряя возможности jQuery.
Вы можете просто изменить имена входных данных на location
, добавить атрибут data-choose="location"
в элементы select
которые вам нужно показать или скрыть в зависимости от радио, и написать более простой и действительный код без hardcoding, например, "state", "city",, или "страны".
Смотрите это.
Это будет весь jQuery, в котором вы нуждаетесь:
$(function () {
$('[data-choose="location"]').hide();
$('[name="location"]').change(function () {
$('[data-choose="location"]').hide();
$('#'+$(this).val()).show();
});
})
РЕДАКТИРОВАТЬ: Изменен. .click
на. .change
на совет Jai.
.click
может быть .change
, нет? Спасибо! :) Однако я не думаю, что селектор должен быть :radio
так как это создаст проблемы, когда OP попытается добавить другой набор переключателей где-нибудь еще на своей странице. :)
попробуй что-нибудь вроде этого
$(window).load(function(){
$("input[name=B]").change(function(){
if($('input[name=B]:checked').val()=="country")
{
alert("country");
$("#country").show();
$("#state,#city").hide();
}
if($('input[name=B]:checked').val()=="state")
{
alert("state");
$("#state").show();
$("#country,#city").hide();
}
if($('input[name=B]:checked').val()=="city")
{
alert("city");
$("#city").show();
$("#country,#state").hide();
}
});
});
АЛЬТЕРНАТИВНОЕ РЕШЕНИЕ
попробуйте сделать свой код простым
$(window).load(function(){
$("input[name=B]").change(function(){
var elem = "#" + $('input[name=B]:checked').val();
if($(elem).length){
$("#country,#state,#city").hide();
$(elem).show();
}
});
});
Попробуй это:
$( document ).ready(function(e) {
$("input[name=B]").click(function () {
if ($('input[name=B]').is(':checked')) {
var val = $('input[name=B]:checked').val();
switch(val){
case "country":
alert("country");
$("#country").show();
$("#state,#city").hide();
break;
case "state":
alert("state");
$("#state").show();
$("#country,#city").hide();
break;
case "city":
alert("city");
$("#city").show();
$("#country,#state").hide();
break;
}
}
});
});
#main
$(window).load =function() {
должно быть $(window).load(function() {
});
обновить
$ (window).load to window.onload
и предоставить таблице атрибут id, который вы назначили
if($('input[name=B]:checked').val()=="country")
это правильно