在整个场景中,我想在选择父选择和子选择的1个选项时执行此操作,可以显示与父选择相关的所有选项,HTML代码中的子值相同。
$("#ref_type_text").change(function() {
var val = $(this).val();
if (val == "item1") {
$("#ref_type_text_right").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
} else if (val == "item2") {
$("#ref_type_text_right").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
} else if (val == "item3") {
$("#ref_type_text_right").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>$
<div class="left_pan">$
<label for="ref_type_text">Reference <u>t</u>ype:</label>$
<select name="ref_type_text" id="ref_type_text" class="dropdown" accesskey="t">
<option value="1" selected="selected">Numbered item</option>
<option value="2">Heading</option>
<option value="3">Bookmark</option>
<option value="4">Footnote</option>
</select>
</div>
<div class="right_pan">
<label for="insert_ref_text">Insert <u>r</u>eference to:</label>
<select name="ref_type_text_right" id="ref_type_text_right" class="dropdown" accesskey="t">
<option value="1" selected="selected">Page number</option>
<option value="1">Paragraph number</option>
<option value="1">Paragraph number(no content)</option>
<option value="1">Paragraph number(full content)</option>
<option value="1">Paragraph Text</option>
<option value="1">Above/Below</option>
<option value="2">Heading text</option>
<option value="2">Page number</option>
<option value="2">Heading number</option>
<option value="2">Heading number(no content)</option>
<option value="2">Heading number(full content)</option>
<option value="2">Above/Below</option>
<option value="3">Bookmark text</option>
<option value="3">Page number</option>
<option value="3">Paragraph number</option>
<option value="3">Paragraph number(no content)</option>
<option value="3">Paragraph number(full content)</option>
<option value="3">Above/Below</option>
<option value="4">Footnote number</option>
<option value="4">Page number</option>
<option value="4">Above/Below</option>
<option value="4">Footnote number(formatted)</option>
</select>
</div>
答案 0 :(得分:2)
您可以隐藏事件处理程序中的所有选项,并显示具有匹配值的选项,如下所示:
type pingDataFormat struct {
UserAccessToken string `json:"userAccessToken"`
UploadStartTimeInSeconds int `json:"uploadStartTimeInSeconds"`
UploadEndTimeInSeconds int `json:"uploadEndTimeInSeconds"`
CallbackURL string `json:"callbackURL"`
}
$("#ref_type_text").change(function () {
var val = $(this).val();
$("#ref_type_text_right option").hide();
$("#ref_type_text_right option[value=" + val + "]").show();
});
$("#ref_type_text").trigger('change');
答案 1 :(得分:1)
你可以创建一个功能&#34;过滤&#34;女巫会使用参数&#34; data-parent&#34;
过滤你的2选择
$(function(){
// declare the two select
$parentSelect = $("select[name=parentSelect]");
$childSelect = $("select[name=childSelect]");
// select the child items of first parent
filter($parentSelect,$childSelect);
// select the child items of selected parent
$parentSelect.change(function(){
filter($(this),$childSelect);
});
});
function filter(parent,child){
var selectedValue=$(parent).val();
var childSelected = false;
$(child).find('option').each(function() {
if($(this).attr("data-parent") != selectedValue)
$(this).hide();
else{
$(this).show();
if(childSelected === false){
$(this).prop('selected', 'selected');
childSelected = true;
}
}
});
}
&#13;
select{
width:200px;
font-size: 14px;
padding: 4px 10px;
margin: 10px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentItems">
<select name="parentSelect">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
<option value="3">Parent 3</option>
</select>
</div>
<div class="ChildItems">
<select name="childSelect">
<option data-parent="1" value="11">child1-1</option>
<option data-parent="1" value="12">child1-2</option>
<option data-parent="1" value="13">child1-3</option>
<option data-parent="2" value="21">child2-1</option>
<option data-parent="2" value="22">child2-2</option>
<option data-parent="2" value="23">child2-3</option>
<option data-parent="3" value="31">child3-1</option>
<option data-parent="3" value="32">child3-2</option>
<option data-parent="3" value="33">child3-3</option>
</select>
</div>
&#13;
答案 2 :(得分:0)
将所有子选项保存在特定集合中,然后根据父选择 - 下拉值在下拉菜单中加载它们。在这里,我建议我之前的solution
答案 3 :(得分:0)
试试这个:
$("#ref_type_text").change(function() {
$('#ref_type_text_right').val(
$('#ref_type_text option:selected').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_pan">
<label for="ref_type_text">Reference <u>t</u>ype:</label>
<select name="ref_type_text" id="ref_type_text" class="dropdown">
<option value="0" selected="selected">Numbered item</option>
<option value="1">Heading</option>
<option value="2">Bookmark</option>
<option value="3">Footnote</option>
</select>
</div>
<br>
<div class="right_pan">
<label for="insert_ref_text">Insert <u>r</u>eference to:</label>
<select name="ref_type_text_right" id="ref_type_text_right" class="dropdown" >
<option value="0" selected="selected">Page number</option>
<option value="1">Paragraph number</option>
<option value="2">Heading text</option>
<option value="3">Bookmark text</option>
<option value="4">Footnote number</option>
</select>
</div>