html-select 相关问题

一个HTML用户界面元素，用于从有限的选项集合中选择一个或多个选项。

我有一个输入表单，可以让我从多个选项中进行选择，并在用户更改选择时执行某些操作。例如，一个

javascript html html-select dom-events

回答 29 投票 180

我有两个这样的输入 a b 我有两个像这样的<select>输入 <select id="sel1"> <option value="a">a</option> <option value="b">b</option> </select> <select id="sel2"> //if 'a' is selected above, //<option>apple</option>, <option>airplane</option> //if 'b' is selected above, //<option>banana</option>, <option>book</option> </select> 我想根据sel1中的选择列出不同的选项集。我可以像这样使用 onchange 属性获取选定的值： <select id="sel1" onchange="giveSelection(this)"> <script type="text/javascript"> function giveSelection(sel) { var selected = sel.value; } </script> 但我无法想出一种方法来使用此值在sel2中输出不同的选择选项。你快到了。因为你已经得到sel1的值，剩下的就是根据值过滤sel1的选项。 var sel1 = document.querySelector('#sel1'); var sel2 = document.querySelector('#sel2'); var options2 = sel2.querySelectorAll('option'); function giveSelection(selValue) { sel2.innerHTML = ''; for(var i = 0; i < options2.length; i++) { if(options2[i].dataset.option === selValue) { sel2.appendChild(options2[i]); } } } giveSelection(sel1.value); <select id="sel1" onchange="giveSelection(this.value)"> <option value="a">a</option> <option value="b">b</option> </select> <select id="sel2"> <option data-option="a">apple</option> <option data-option="a">airplane</option> <option data-option="b">banana</option> <option data-option="b">book</option> </select> 我使用 jQuery 开发了一个可以处理无限量的选择组合下拉列表框的版本。希望这对某人有用。 function jq_ChainCombo(el) { var selected = $(el).find(':selected').data('id'); // get parent selected options' data-id attribute // get next combo (data-nextcombo attribute on parent select) var next_combo = $(el).data('nextcombo'); // now if this 2nd combo doesn't have the old options list stored in it, make it happen if(!$(next_combo).data('store')) $(next_combo).data('store', $(next_combo).find('option')); // store data // now include data stored in attribute for use... var options2 = $(next_combo).data('store'); // update combo box with filtered results $(next_combo).empty().append( options2.filter(function(){ return $(this).data('option') === selected; }) ); // now enable in case disabled... $(next_combo).prop('disabled', false); // now if this combo box has a child combo box, run this function again (recursive until an end is reached) if($(next_combo).data('nextcombo') !== undefined ) jq_ChainCombo(next_combo); // now next_combo is the defining combo } // quick little jquery plugin to apply jq_ChainCombo to all selects with a data-nextcombo on them jQuery.fn.chainCombo = function() { // find all divs with a data-nextcombo attribute $('[data-nextcombo]').each(function(i, obj) { $(this).change(function (){ jq_ChainCombo(this); }); }); }(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <select class="combo-a" data-nextcombo=".combo-b"> <option value="1" data-id="1" data-option="-1">Bob's Coffee</option> <option value="2" data-id="2" data-option="-1">Sally's Diner</option> <option value="3" data-id="3" data-option="-1">Jim's Waffle House</option> <option value="4" data-id="4" data-option="-1">No Mart</option> <option value="5" data-id="5" data-option="-1">Ye Olde Ale Tavern</option> </select>  <select class="combo-b" data-nextcombo=".combo-c" disabled> <option></option> <option value="1" data-id="1" data-option="1">15th's Avenue Coffee House</option> <option value="2" data-id="2" data-option="4">14th Street location</option> <option value="3" data-id="3" data-option="4">13th Avenue</option> <option value="4" data-id="4" data-option="3">Scarlet Temple Location</option> <option value="5" data-id="5" data-option="2">New Jack City</option> <option value="6" data-id="6" data-option="5">Bob street</option> <option value="7" data-id="7" data-option="1">Billy Avenue</option> </select>  <select class="combo-c" disabled> <option></option> <option value="4" data-id="4" data-option="2">new display</option> <option value="3" data-id="3" data-option="3">new display</option> <option value="5" data-id="5" data-option="2">new display</option> <option value="6" data-id="6" data-option="2">new display</option> <option value="7" data-id="7" data-option="4">display #1</option> <option value="8" data-id="8" data-option="5">new display</option> <option value="9" data-id="9" data-option="5">new display</option> <option value="10" data-id="10" data-option="5">new display</option> <option value="11" data-id="11" data-option="5">new display</option> <option value="12" data-id="12" data-option="5">new display</option> <option value="13" data-id="13" data-option="6">new display</option> <option value="14" data-id="14" data-option="6">new display</option> <option value="15" data-id="15" data-option="6">new display</option> <option value="16" data-id="16" data-option="1">Front's Counter</option> <option value="17" data-id="17" data-option="1">back counter</option> <option value="18" data-id="18" data-option="4">display #2</option> </select>

html forms html-select

回答 2 投票 0

选定属性不起作用的角度选择选项

使用Angular 4，我有一个html模板，我想要一个有两个选项的选择框。默认情况下应预先选择其中一个选项。 ...

angular html-select angular2-ngmodel

回答 2 投票 4

如何使用Python中的Selenium从https://www.amazon.in/中的下拉列表框中选择Books？

如何使用Python中的Selenium从https://www.amazon.in/下拉列表框中选择选项书？我正在尝试代码：driver.find_element_by_xpath（“// * [@ id ='searchDropdownBox']”）....

python selenium amazon html-select webdriverwait

回答 2 投票 0

如何设置HTML元素的默认值？

我认为在下面的元素上添加“value”属性会导致包含我默认选择的“值”：