Необходимая функция для запуска при выборе опции в выпадающем списке

Question

Привет, я знаю, что это, вероятно, было задано раньше.

У меня есть этот код до сих пор:

<select name="cashfunction" type="text" id="cashfunction" title="Select Function" 

    class="required"> 
        <option id="cashfloat">Cash Float</option> 
        <option id="cashvari">Cash Variance</option> 
        <option id="expenditure" value="1">Expenditure</option> 
        <option id="cashbanked" value="2">Cash Banked</option> 
    </select> 



<script> 
     function bankCategory() 
           { 
           document.getElementById('bankcat').style.visibility='visible'; 
           $('.dynamicreq').addClass("required"); 
           } 
     function expendCategory() 
           { 
           document.getElementById('expend').style.visibility='visible'; 
           $('.dynamicreq').addClass("required"); 
           } 

     $('#cashfunction').on("change", function() { 
               if($(this).val() === 1) 
                {bankCategory(); 
                } 

               if($(this).val() === 2) 
                {expendCategory(); 
                } 
              } 
           ); 
    </script> 

мне нужно дивы по идентификатору, чтобы оставаться скрытым, пока не выбрано. В настоящий момент оба divs скрыты, но остаются скрытыми, когда я выбираю из меню.

Answer 1

Я считаю, что причина ваш текущий код не работает в том, что вы используете === для сравнения строки, возвращаемой из .val() с числовыми значениями 1 и 2. Оператор === проверяет, что операнды имеют одинаковое значение и, поэтому не вернется true. Либо использовать == вместо этого, который делает некоторые неявные преобразования типов, или, лучше, сравнивать строки с текстовыми строками, а не полагаться на преобразование типов:

if($(this).val() === "1") 

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

<select name="cashfunction" type="text" id="cashfunction" title="Select Function" class="required"> 
    <option id="cashfloat">Cash Float</option> 
    <option id="cashvari">Cash Variance</option> 
    <option id="expenditure" data-assoc="bankcat" value="1">Expenditure</option> 
    <option id="cashbanked" data-assoc="expend" value="2">Cash Banked</option> 
</select> 
<div id="bankcat" class="optional">Bank Category div</div> 
<div id="expend" class="optional">Expenditure Category div</div> 

... а затем использовать JS-то вроде этого:

$('#cashfunction').on("change", function() { 
    $("div.optional").hide(); 
    var associatedDivId = $(this).find("option").filter(":selected").attr("data-assoc"); 
    if (associatedDivId) { 
    $("#" + associatedDivId).show(); 
    } 
}); 

Demo: http://jsfiddle.net/b372b/

Обратите внимание, что в моем демо я использовал display:none вместо visibility:hidden, потому что тогда я был в состоянии использовать только .hide() и .show(), но если вы хотите сохранить с помощью visibility было бы:

$("#" + associatedDivId).css("visibility", "visible"); 

На самом деле вы не включили разметку для своих div в вопросе, но если вы дадите им общий класс, это упростит их скрыть, если выбор изменится. (Ваш вопрос никогда специально не говорит о том, что вы хотите скрыть их снова, поэтому, если не очевидно, вы можете просто удалить оператор .hide().)

Если использование атрибутов data- кажется слишком сложным, вы можете просто поместить идентификатор связанных div в value свойство, а затем JS будет:

var associatedDivId = $(this).val(); 

что касается, где вы закодированы $('.dynamicreq').addClass("required"); - Я предполагаю, что эти .dynamicreq элементы находятся в пределах дивы, которые будучи скрытыми или показанными, но учтите, что .addClass() добавит новый класс для всех них включая скрытых.