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

Question

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

0

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

У меня есть этот код:

  <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 по id оставался скрытым до тех пор, пока не будет выбран. В настоящий момент обе div скрыты, но остаются скрытыми, когда я выбираю из меню.

Erich Niemand 21 сен. 2013, в 12:04

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

nnnnnn · Accepted Answer · 2013-09-21T09-17-00.000Z

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

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

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

<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();
  }
});

Демо: 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 элементы находятся в пределах .dynamicreq, которые скрыты или показаны, но обратите внимание, что .addClass() добавит новый класс ко всем из них, включая скрытые.

Спасибо, оказывается, это потому, что я не поставил значения 1 и 2 в кавычки