[英]how to refresh select field without refreshing full page
我有两个下拉级别(select box)
。
如果我在拳头水平上选择某些东西,则根据拳头选择将出现第二个下拉设置
例如:我在第一级有6个选择,对于每个选择,我有另外6个下拉设置隐藏在页面上。 作为用户选择,它将显示第二级下拉。
这是第一级
<select name="TapeType" id="TapeType">
<option value="s"><Select></option>
<option value="Polypropylene Tape" id="PT">POLYPROPYLENE TAPE</option>
<option value="HD Polypropylene Tape">HD POLYPROPYLENE TAPE</option>
<option value="X HD Polypropylene Tape">X HD POLYPROPYLENE TAPE</option>
<option value="PVC Tape">PVC TAPE</option>
<option value="HD PVC TAPE">HD PVC TAPE</option>
<option value="Reinforced Paper Tape">REINFORCED PAPER TAPE</option>
<option value="Flatback Tape">FLATBACK TAPE</option>
</select>
这是二级的两个例子
01
<select name="TapeColorPT" id="TapeColorPT" class="toggledDropDown">
<option value="Tan">Tan</option>
<option value="White">White</option>
<option value="Clear">Clear</option>
<option value="Red">Red</option>
<option value="Orange">Orange</option>
<option value="Yellow">Yellow</option>
</select>
02
<select name="TapeColorHPT" id="TapeColorHPT" class="toggledDropDown">
<option value="Tan">Tan</option>
<option value="White">White</option>
<option value="Clear">Clear</option>
</select>
为了显示每个下拉,我使用此方法与js
$('.toggledDropDown').hide();
$('#TapeType').change(function () {
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
$('#TapeColorPT').show();
}
else {
$('#TapeColorPT').hide();
if ($('#TapeType option:selected').val() == "HD Polypropylene Tape"){
$('#TapeColorHPT').show();
}
else {
$('#TapeColorHPT').hide();
}
}});
我的问题是
例如:当我选择1个第一级时,我在第二级选择3。 然后我回到第一级并选择2,所以出现另一组二级下拉。 之后当我回到第一级选择1时,我之前选择的第二级3将在那里。 当我再次回到它时,我希望它不会被选中。
所以我想如果有人让我知道如何用javascript(js)
刷新选择框而不刷新整页,我可以这样做。
你可以尝试修改你的js函数:
$('#TapeType').change(function () {
//you will hide the second and third level
$('.toggledDropDown').hide();
//here i reset the second and third level to defaults by selecting the top one
$('#TapeColorPT,#TapeColorHPT').attr('value','Tan');
//here get the value od the first dropdown
var tapeTypeVal = $('#TapeType').val();
//here i switch for the 6 option of the first dropdown to know which dropdown will
//be appear
switch (tapeTypeVal) {
case 'POLYPROPYLENE TAPE':
$('#TapeColorPT').show();
break;
case 'HD Polypropylene Tape':
$('#TapeColorHPT').show();
break;
}
});
尝试将您的顶行代码放在onchange事件处理程序的主体中:
$('.toggledDropDown').hide(); /* existing top line of code can remain here */
$('#TapeType').change(function () {
$('.toggledDropDown').hide(); /* but also add it right here */
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
$('#TapeColorPT').show();
}
...
完整的代码
$('.toggledDropDown').hide();
$('#TapeType').change(function () {
$('.toggledDropDown').hide(); /* adding this line here is the only change */
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
$('#TapeColorPT').show();
}
else {
$('#TapeColorPT').hide();
if ($('#TapeType option:selected').val() == "HD Polypropylene Tape"){
$('#TapeColorHPT').show();
}
else {
$('#TapeColorHPT').hide();
}
}});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.