onChange и onSelect в DropDownList - PullRequest
Новая
       2

onChange и onSelect в DropDownList

7 голосов
/ 30 марта 2012

У меня есть DropDownList, который спрашивает пользователя, хочет ли он вступить в клуб: 

Do you want to join the club
Yes
No

В этом списке есть другой список, который по умолчанию отключен. В этом списке есть отделы клуба. Этот список не будет включен, пока пользователь не выберет Да.

Я создал следующий код, но проблема, которую я не смог решить, - предположим, что пользователь выбирает «Да», затем он меняет свое решение и снова выбирает «Нет». В этом случае список отделов все еще включен. Я хочу, чтобы он отключился, когда он снова выберет Нет. 

<html>
    <head>
        <script type="text/javascript">
            function disable()
            {
                document.getElementById("mySelect1").disabled=true;
            }
            function enable()
            {
                document.getElementById("mySelect1").disabled=false;
            }
        </script>
    </head>
    <body>
        <form>
            <select id="mySelect" onChange="enable();">
                <option onSelect="disable();">No</option>
                <option onSelect="enable();">Yes</option>
            </select>
            <select id="mySelect1" disabled="disabled" >
                <option>Dep1</option>
                <option>Dep2</option>
                <option>Dep3</option>
                <option>Dep4</option>
            </select>
        </form>
    </body>
</html>

Я думал, что onSelect="disable();" решит проблему, но она все еще не работает.

Спасибо

Ответы [ 5 ]

15 голосов
/ 30 марта 2012

Я бы сделал это так jsFiddle пример .

JavaScript: 

function check(elem) {
    document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}

HTML: 

<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>

<select id="mySelect1" disabled="disabled" >
<option>Dep1</option>
<option>Dep2</option>
<option>Dep3</option>
<option>Dep4</option>
</select>
</form>
4 голосов
/ 30 марта 2012

Могу поспорить, что onchange срабатывает после onselect, по сути, снова включив выбор.

Я бы порекомендовал вам реализовать только onchange, проверитькакая опция была выбрана и включена или отключена на основании этого.

Чтобы получить значение выбранной опции, используйте: 

document.getElementById("mySelect").options[document.getElementById("mySelect").selectedIndex].value

, которая не даст .. ничего, так как вы не сделалиопределил значение для каждой опции ..: (* 

<select id="mySelect" onChange="enable();">
<option onSelect="disable();" value="no">No</option>
<option onSelect="enable();" value="yes">Yes</option>
</select>

Теперь это даст "yes" или "no"

3 голосов
/ 23 ноября 2014

Просто и Легко: Код JavaScript: 

function JoinedOrNot(){
    var cat = document.getElementById("mySelect");
    if(cat.value == "yes"){
        document.getElementById("mySelect1").disabled = false;
    }else{
        document.getElementById("mySelect1").disabled = true;
    }
}

просто добавьте в эту строку [onChange = "JoinedOrNot ()"]: <select id="mySelect" onchange="JoinedOrNot()">

все отлично работает;)

3 голосов
/ 30 марта 2012

Чтобы создать надежную форму, загрузите ее в полезное состояние и используйте скрипт для улучшения ее поведения.Далее выбор был заменен переключателями (значительно облегчает жизнь пользователю).

Параметр «Да» установлен по умолчанию, и выбор включен.Если пользователь проверяет любую радио-кнопку, выбор включается или отключается соответственно.

<form onclick="this.mySelect1.disabled = this.becomeMember[1].checked;" ... >
  <input type="radio" name="becomeMember" checked>Yes<br>
  <input type="radio" name="becomeMember">No<br>

  <select id="mySelect1">
    <option>Dep1
    <option>Dep2
    <option>Dep3
    <option>Dep4
  </select>
  ...
</form>
1 голос
/ 01 января 2014

гм. почему вы не используете onClick()

<select id="mySelect" onChange="enable();">
   <option onClick="disable();">No</option>
   <option onClick="enable();">Yes</option>
</select>
...