2017-04-14 585 views
1

我有預訂單。如果我的一個客戶陷入了問題,我希望他們在他們喜歡的時間給我打電話。爲此,我創建了兩個下拉列表框。第一個組合框應該包含兩個選項(如片段中給出的),默認選擇今天調用。如果第二個選項呼叫明天選擇,第二個下拉列表中應充滿可用時間段,如:選擇時更改選項

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

等等。這怎麼可能實現?


 
    $("#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>

+3

你的問題還不清楚。請澄清。 – Difster

+0

謝謝@Difster我的英語如此糟糕後,jquery我想增加我的英語,如果我could.my問題是根據我選擇 –

+0

挑選選項。這就像是我想要的,但我終於做到了,謝謝 http://codepen.io/cowardguy/pen/dWPRJP –

回答

3

試試這個。它會幫助你。

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>

1

你的問題是如此模糊。請重新說明。從我的描述中理解的內容來看,以下內容應該可以幫助你實現你正在努力的目標。請注意,我冒昧地承擔了某些事實。


 
    $("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>