JQuery: Показать DIV в зависимости от выбора ниспадающего

Это мой код:JQuery: Показать DIV в зависимости от выбора ниспадающего

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 
$(document).ready(function() { 
    $('select[name=payment]').change(function() { 
    var value = $(this).val(); 
    if (value == "debit") { 
     $(".box").not(".debit").hide(); 
     $(".debit").show(); 
    } else if (value == "transfer") { 
     $(".box").not(".transfer").hide(); 
     $(".transfer").show(); 
    } 
    }); 
}); 
</script> 
</head> 
<body> 

<select name="payment"> 
    <option data-calc="0" value="" disabled selected>Chose payment ↓</option> 
    <option value="transfer">transfer</option> 
    <option value="debit">debit</option> 
</select> 

<div class="debit box">debit</div> 
<div class="transfer box">transfer</div> 

</body> 
</html>

Это работает очень хорошо. Но я не хочу называть свой класс debit box. Я хочу называть его debit.

Это означает <div class="debit">debit</div> вместо <div class="debit box">debit</div>.

Как я могу избавиться от этой вещи box?

источник

2016-10-17 David

ли вы имеете в виду: изменение '$ (» окно "). Не скрыть();' в '$ (" (" дебет.").. transfer(); 'to' $ (". debit"). hide(); текущий код - гораздо более надежным. –

* «Я хочу назвать это дебетом» * - это уже «называется» дебетом. Что вы на самом деле пытаетесь сделать, это не позволяет вам делать? –

Поместите все коробки внутри другого DIV.

<div id="boxes"> 
    <div class="debit box">debit</div> 
    <div class="transfer box">transfer</div> 
</div>

Тогда вы можете сделать:

$("#boxes > div").hide(); 
$(".debit").show();

источник

2016-10-17 15:34:32 Barmar

Если вы хотите, чтобы имя класса будет списывать, и идентифицировать его с этим именем класса в методе JQuery скрыть, то метод должен выглядеть следующим образом:

Но я думаю, это подчеркивает, что вы хотите, что предлагает Barmar, потому что вам нужно будет обновлять скрытие и показ вручную для любого элемента выбора, который вы добавите. Но для двух элементов это может быть нормально.

источник

2016-10-17 15:40:48 levilime

Это может быть работает для вас:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 
$(document).ready(function() { 
    $('select[name=payment]').change(function() { 
    var value = $(this).val(); 
    $(".boxes div").hide(); 
    $("." + $value).show(); 
    }); 
}); 
</script> 
</head> 
<body> 

<select name="payment"> 
    <option data-calc="0" value="" disabled selected>Chose payment ↓</option> 
    <option value="transfer">transfer</option> 
    <option value="debit">debit</option> 
</select> 
<div class="boxes"> 
    <div class="debit">debit</div> 
    <div class="transfer">transfer</div> 
</div> 

</body> 
</html>

источник

2016-10-17 15:41:42

JQuery: Показать DIV в зависимости от выбора ниспадающего

ответ

Смежные вопросы