選択時にオプションを変更する

Question

私は予約フォームを持っています。私の顧客の1人が問題に陥った場合、彼らは彼らが好む時間に私に電話をして欲しい。そのために、2つのドロップダウンリストボックスを作成しました。最初のコンボボックスには、という2つのオプションが含まれている必要があります。デフォルトではが選択されています。

12:00 
13:00 
16:00 
20:00 
... 
... 

など：第二の選択肢コール明日を選択した場合、2番目のドロップダウンリストは次のように使用可能なタイムスロットで満たされる必要があります。どのようにこれを達成することができますか？

 
    $("#call-day").change(function(e){ 
 
    val=$("option:selected",this).val(); 
 
    if(val=="today"){ 
 
     
 
    }else if(val=="tomorrow"){ 
 
     
 
    } 
 
    });

<select name="call-day" id="when-ajax"> 
 
    <option class="today">Call Today</option> 
 
    <option class="tomorrow">Call Tomorrow</option> 
 
</select> 
 

 
<select name="hours"> 
 
    <option>Call Now</option> 
 
</select> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

これを試してみてください。それはあなたを助けるでしょう。

jQuery(document).ready(function() { 
 
    
 
    jQuery("#source").change(function() { 
 
    
 
    var el = $(this) ; 
 
    
 
    if(el.val() === "ONLINE") { 
 
    jQuery("#status").append(" <option>SHIPPED</option>"); 
 
    } 
 
     else if(el.val() === "MANUAL") { 
 
     $("#status option:last-child").remove() ; } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
 
Source: 
 
    <select id="source" name="source"> 
 
    <option>MANUAL</option> 
 
    <option>ONLINE</option> 
 
</select> 
 

 
Status: 
 

 
<select id="status" name="status"> 
 
    <option>OPEN</option> 
 
     <option>DELIVERED</option> 
 
    
 
</select>

Answer 2

あなたの質問はとても曖昧です。言い換えてください。私があなたの説明から理解したことから、あなたがしようとしていることを達成するのに役立つはずです。私は自由をとり、特定の事実を引き受けることに注意してください。

 
    $("select[name='call-day']").change(function(e){ 
 
    val=$(this).val(); 
 
    if(val=="today"){ 
 
     //What you want to do here is not mentioned. So I am leaving it blank 
 
    }else if(val=="tomorrow"){ 
 
     //Available time slots should be retrieved from some persistent location. Assuming it is already done... 
 
     var availableSlots = ["12:00", "13:00", "14:00", "16:00"]; 
 
     $("select[name='hours']").empty(); 
 
     $("select[name='hours']").append("<option value=''>--Select Time--</option"); 
 
     for(i in availableSlots){ 
 
     var item = availableSlots[i]; 
 
     var optionElement = "<option value='"+ item +"'>" + item + "</option>"; 
 
     $("select[name='hours']").append(optionElement); 
 
     } 
 
    } 
 
    });

<select name="call-day" id="when-ajax"> 
 
    <option value="today">Call Today</option> 
 
    <option value="tomorrow">Call Tomorrow</option> 
 
</select> 
 

 
<select name="hours"> 
 
    <option>Call Now</option> 
 
</select> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>