2017-04-14 149 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>