通過onchange啓用禁用的選擇選項？

我對jquery/javscript非常陌生，而且我的代碼有問題。通過onchange啓用禁用的選擇選項？

我有2個選擇選項。第一個是默認禁用的，第二個是禁用的。

我試圖讓第一個選擇選項改變時，第二個選擇選項將被啓用。

CSS

<label class="movie">Movie:</label> 
<br> 
<select name="movie" id="whichMovie" onchange="changeMovie()"> 
    <option value="" disabled selected>Please select a movie first</option> 
    <option value="AC">Hercule</option> 
    <option value="CH">How to Train Your Dragon 2</option> 
    <option value="AF">Fearless</option> 
    <option value="RC">The Other Woman</option> 
</select> 
<!--day--> 
<br><label>Day:</label> 
<br> 
<select name="day" value="whichDay" id="whichDay" onclick="changeDay()" disabled> 
    <option value="--">--</option> 
    <option value="mon">Monday</option> 
    <option value="tue">Tuesday</option> 
    <option value="wed">Wednesday</option> 
    <option value="thur">Thursday</option> 
    <option value="fri">Friday</option> 
    <option value="sat">Saturday</option> 
    <option value="sun">Sunday</option> 
</select> 
<br>

function changeMovie() { 
    $('#whichDay').removeAttr('disabled'); 
});

而且，你怎麼改寫根據您在第一選擇哪一選項的第二個下拉/設置新的選擇？

例如我選擇電影下的'hercule'，唯一會出現的日子是星期一，星期三和星期三。同樣，如果我選擇「無所畏懼」，它會顯示出不同的日子。

在此先感謝！

來源

2015-09-14 antonlab

在這裏你去。你可以只寫一個change事件select element並基於選擇的值可以附加到whichDay選擇元素必要的選項如下：

$("#whichMovie").change(function() { 
 
     var val = $(this).val(); //get the value 
 
     $("#whichDay").attr('disabled',false); 
 
     if (val == "AC") { //if Hercules append only necessary options 
 
      $("#whichDay").html("<option value='mon'>Monday</option><option value='tue'> Tuesday</option><option value='wed'>Wednesday</option>"); 
 
     } else if (val == "CH") { 
 
      $("#whichDay").html("<option value='thur'>Thursday</option><option value='fri'> Friday</option><option value='sat'>Saturday</option>"); 
 
     } else if (val == "AF") { 
 
      $("#whichDay").html("<option value='sun'>Sunday</option><option value='tue'>Tuesday"); 
 
     } 
 
     else 
 
     { 
 
      $("#whichDay").html("<option value='fri'>Friday</option><option value='mon'>Monday"); 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="movie">Movie:</label> 
 
<br> 
 
<select name="movie" id="whichMovie"> 
 
    <option value="" disabled selected>Please select a movie first</option> 
 
    <option value="AC">Hercule</option> 
 
    <option value="CH">How to Train Your Dragon 2</option> 
 
    <option value="AF">Fearless</option> 
 
    <option value="RC">The Other Woman</option> 
 
</select> 
 
<!--day--> 
 
<br><label>Day:</label> 
 
<br> 
 
<select name="day" value="whichDay" id="whichDay" onclick="changeDay()" disabled> 
 
    <option value="--">--</option> 
 
    
 
</select> 
 
<br>

來源

2015-09-14 05:10:53

這工作非常好，我的問題的兩個方面，謝謝:) – antonlab

任何時候..快樂編碼..：） –

這裏是一個可能的解決方案：

$('#whichMovie').on('change', function(){ 
 
    
 
    var whichDayDdl = $('#whichDay'); 
 

 
    whichDayDdl.prop('disabled', true); 
 

 
    if ($(this).val() != '') 
 
    { 
 
     whichDayDdl.prop('disabled', false); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="movie">Movie:</label> 
 
<br> 
 
<select name="movie" id="whichMovie" onchange="changeMovie()"> 
 
    <option value="" disabled selected>Please select a movie first</option> 
 
    <option value="AC">Hercule</option> 
 
    <option value="CH">How to Train Your Dragon 2</option> 
 
    <option value="AF">Fearless</option> 
 
    <option value="RC">The Other Woman</option> 
 
</select> 
 
<!--day--> 
 
<br><label>Day:</label> 
 
<br> 
 
<select name="day" value="whichDay" id="whichDay" onclick="changeDay()" disabled> 
 
    <option value="--">--</option> 
 
    <option value="mon">Monday</option> 
 
    <option value="tue">Tuesday</option> 
 
    <option value="wed">Wednesday</option> 
 
    <option value="thur">Thursday</option> 
 
    <option value="fri">Friday</option> 
 
    <option value="sat">Saturday</option> 
 
    <option value="sun">Sunday</option> 
 
</select> 
 
<br>

來源

2015-09-14 05:01:47

你可以像下面。：

$(document).ready(function(){ 
    $("#whichMovie").change(function(){ 
    if($(this).val()!="") 
    { 
    $("#whichDay").removeAttr("disabled"); 
    }  
    }); 
});

FIDDLE DEMO

來源

2015-09-14 05:02:24 Pawan

謝謝你這個完美！ – antonlab

@Pawan：那麼'重寫/設置新選項'呢？ –

@ NorlihazmeyGhazali ..我剛剛閱讀問題標題.. @ Guruprasad饒ans是完美的..感謝糾正我 – Pawan

你的代碼是在changeMovie()右側小錯誤。這種方法是JavaScript的方法，以便去除);方法}後如下圖所示：

function changeMovie() { 
    $('#whichDay').removeAttr('disabled'); 
}

來源

2015-09-14 05:03:55 developerbhuwan

通過onchange啓用禁用的選擇選項？

回答

相關問題