Question

我想在HTML和JavaScript中使用处理SELECT和OPTION Elements

的代码

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

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

如何将2010年作为网页表单中存在的select标记中的用户的默认选项？

我的代码看起来像这样：

<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）在script元素中包含select元素无效。

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

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

Answer 5

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

Answer 6

一大堆工作代码。它将显示您要默认查看的 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);
});

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

7 个答案: