我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:
<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>
然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?
我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:
<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>
然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?
当前回答
您只需要将属性“selected”放在特定选项上,而不是直接指向select元素。
下面是具有不同值的相同和多个工作示例的代码片段。
选择选项3:-<select name=“hall”id=“hall”><option>1</option><option>2</option><option selected=“selected”>3</option><选项>4</选项><选项>5</选项></选择><br/><br/><br/>选择选项5:-<select name=“hall”id=“hall”><option>1</option><option>2</option><option>3</option><选项>4</选项><option selected=“selected”>5</option></选择><br/><br/><br/>选择选项2:-<select name=“hall”id=“hall”><option>1</option><option selected=“selected”>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>
其他回答
<select>的问题是,它有时与当前渲染的状态断开连接,除非选项列表中发生了更改,否则不会返回更改值。当试图从列表中选择第一个选项时,这可能是一个问题。下面的代码可以获得第一次选择的第一个选项,但onchange=“changeFontSize(this)”本身不会。上面描述了一些方法,使用伪选项强制用户更改值以拾取实际的第一个值,例如使用空值开始列表。注意:onclick将调用该函数两次,以下代码没有调用,但解决了第一次出现的问题。
<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extraLarge">Extra large</option>
</select>
<script>
function changeFontSize(x){
body=document.getElementById('body');
if (x.value=="extraLarge") {
body.style.fontSize="25px";
} else {
body.style.fontSize=x.value;
}
}
</script>
为要作为默认选项的选项设置selected=“selected”。
<option selected="selected">
3
</option>
另一个例子;使用JavaScript设置所选选项。
(您可以使用此示例将值数组循环到下拉组件中)
<select id=“yourDropDownElementId”><select/>
// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);
要使用PHP和JavaScript设置默认值:
State: <select id="State">
<option value="" selected disabled hidden></option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
.
.
<option value="West Bengal">West Bengal</option>
</select>
<?php
if(isset($_GET['State'])){
echo <<<heredoc
<script>
document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;
</script>
heredoc;
}
?>
每个选项中都需要一个“id”属性,此解决方案才能正常工作:
<脚本>函数select_option(id,value_selected){var选择;select=document.getElementById(id);如果(select==null)返回0;var选项;option=select.options.namedItem(value_selected);if(option==null)返回0;option.selected=“已选择”;返回true;} </script><select name=“hall”id=“hall”><option id=“1”>1</option><option id=“2”>2</option><option id=“3”>3</option><option id=“4”>4</option><option id=“5”>5</option></选择><script>select_option(“大厅”,“3”)</脚本>
函数首先尝试查找id为的<select>,然后在<select>选项中搜索value_selected,如果找到它,则将所选属性设置为true。否则为False