如何设置 SELECT Tag 的默认选项以及如何获取所选选项的索引？

Question

我想要一个处理 SELECT 和 OPTION 元素的 HTML 和 JavaScript 代码

<select>
    <option>
    </option>
    <option>
    </option>
</select>

如何获取所选选项的索引，然后获取该索引的值？

如何使 2010 成为网页表单中存在的选择标记中的用户的默认选项可视化？

我的代码看起来像这样：

<select id="SelectYear" name="SelectYear" size="1">  
    <script type="text/javascript">
        var startyear = "1950";
        var endyear   = "2020";
        for(var k=startyear; k<=endyear; k++ ) document.write("<option value="+k+">"+k+"</option>");
    </script>   
</select>

我尝试了许多表达式来获取该索引，即使我知道它可能会给出不同的结果，例如：

var vIndex = document.getElementById('SelectYear').selectedIndex;    
var vIndex = document.getElementById('SelectYear').selectedIndex.value;    
var vIndex = document.getElementById('SelectYear').selectedIndex.text;  
var vIndex = document.getElementById('SelectYear').options[document.getElementById('SelectYear').selectedIndex];  
var vIndex = document.getElementById('SelectYear').options[document.getElementById('SelectYear').selectedIndex].value;  
var vIndex = document.getElementById('SelectYear').options[document.getElementById('SelectYear').selectedIndex].text;

我的解决方法是将索引设为静态，例如：

document.getElementById('SelectYear').selectedIndex = 60 ;

但是，如果我不知道确切的索引，或者由于数据库更新或手动编辑而根据 SELECT 元素中发生的更改更改了索引？

Answer 1

要根据索引设置默认选项，请尝试以下操作：

select_element.options[the_index].defaultSelected = true;

（您可能还必须将此属性设置为 false 为先前的默认选项。）

来源：DOM 2 HTML 规范： http : //www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-37770574

Answer 2

<select id="SelectYear" name="SelectYear" size="1">
<script type="text/javascript">
var startyear = "1950";
var endyear   = "2020";
for(var k=startyear; k<=endyear; k++ ) 
{
  var selected = (k==2010) ? 'selected' : '';
  document.write("<option value='"+k+"'"+selected+">"+k+"</option>");
}
</script>
</select>

Answer 3

使用 jQuery 将使这成为一个相当简单的过程。 下面假设选择框的 ID 为 SelectYear。

$('#SelectYear :selected').text(); //the display value
$('#SelectYear :selected').val(); // the actual value

Answer 4

selectedIndex为您提供选项的索引，因此是一个介于 0 和选项总数之间的数字。 它既不是对象也不是选项的 id。

var vSelect = document.getElementById('SelectYear')
var vIndex = vSelect.selectedIndex;
var vOption = vSelect.options[vIndex];

var vValue = vOption.value;

---

编辑：

我想我只会唠叨一下你的代码，因为你似乎在这里做错了几件事。 这可能与您的问题无关，但也许您愿意学习一些东西。

1) 在select元素中包含script元素是无效的。

2）您似乎正在使用 JavaScript-Loop 来基本上生成一些应该是静态的东西。 我会更好地简单地对 HTML 中的选项列表进行硬编码，或者甚至更好，如果您想要更少的工作，请在服务器端生成它。

3）你说的是“默认选项”，所以你也应该在生成列表时这样做，所以要么按照ajreal建议的方式修改你的JavaScript，要么更好，直接在你的HTML中为选项提供selected属性，这也是可能的（再次）服务器端。

Answer 5

document.getElementById("country").value = "your index";

Answer 6

var dropDown = document.getElementById('myDropDown');
for(var i = 0; i < dropDown.options.length; i++) {
    if(dropDown.options[i].text == 'value you want to set in drop down') {
     dropDown.selectedIndex = i; 
     break;
 }

Answer 7

一大块工作代码。 它将显示orderDetails.type您希望作为默认值查看的类型和选项列表。

var selectOrderType = $("<select></select>").attr("id", "edit-orderTypes").attr("name", "orderType").attr('class', 'form-control');
var orderTypes = ['Samad', 'Said', 'Koksulton', 'Man'];
$.each(orderTypes, function (indexPrm, valPrm) {
    let flagLcl = false;
    if (orderDetails.type == valPrm) {
        flagLcl= true;
    }
    let anOptionLcl = new Option(valPrm, valPrm, flagLcl, flagLcl);
    selectOrderType.append(anOptionLcl);
});