document.getElementById.checked=true在chrome中不起作用

Question

我正在编写一个代码，从下拉列表中选择一个值，单选按钮将根据onClick属性自动检查自己。该代码在Firefox和IE中都有效，但在Chrome中无效。

这是下拉列表的代码：

<select name="c_DOB_year" id="c_DOB_year">
    <option selected="selected">Year</option>
    <option value="2008" onClick="document.getElementById('c_age_2').checked=true;">2008</option>
    <option value="2009" onClick="document.getElementById('c_age_1').checked=true;">2009</option>
    <option value="2010" onClick="document.getElementById('c_age_0').checked=true;">2010</option>
</select>

这是单选按钮的代码：

<label>
    <input type="radio" name="c_age" value="4 Years" id="c_age_0" />
    4 Years
</label>
<label>
    <input type="radio" name="c_age" value="5 Years" id="c_age_1" />
    5 Years
</label>
<label>
    <input type="radio" name="c_age" value="6 Years" id="c_age_2" />
    6 Years
</label>

问题出在哪里？希望有人能帮我。谢谢D

Answer 1

我认为点击事件对选项无效。但是，它在选定元素上是有效的。试试看：

var d= {
    '2008':'c_age_2',
    '2009':'c_age_1',
    '2010':'c_age_0',
};
var ele = document.getElementById('c_DOB_year');
ele.onchange = function(){
    document.getElementById(d[ele.value]).checked=true;
}

Answer 2

尝试这种方式

HTML

    <select onChange="jsFunction()" id="selectOpt">
    <option selected="selected">Year</option>
    <option id="c_age_2">2008</option>
    <option id="c_age_1">2009</option>
    <option id="c_age_0">2010</option>
    </select>

编写脚本

  function jsFunction(){
  var myselect = document.getElementById("selectOpt");
  var val=myselect.options[myselect.selectedIndex].id;
    document.getElementById(val).checked=true;
}

演示

Answer 3

将事件处理程序移动到select元素onchange事件，并在脚本中附加该事件。这将允许你清理一些标记，但需要你计算出年份。

HTML

<select name="c_DOB_year" id="c_DOB_year">
<option selected="selected">Year</option>
<option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
</select>
<label>
    <input type="radio" name="c_age" value="4 Years"/>
    4 Years
</label>
<label>
    <input type="radio" name="c_age" value="5 Years"/>
    5 Years
</label>
<label>
    <input type="radio" name="c_age" value="6 Years"/>
    6 Years
</label>

Javascript

document.getElementById("c_DOB_year").onchange = function(){
    var radios = document.getElementsByTagName("input");
    for(var i = 0; i < radios.length; i++){
            radios[i].checked = radios[i].value.split(" ")[0] == new Date().getFullYear() - this.value+1;
    }
};

JS Fiddle:http://jsfiddle.net/mncm8/1/

这可能取决于业务逻辑，但我注意到年份和相应的日期不一致。2008年为2013年前5年，2009年为2013年底前4年，2010年为2013年初前3年。如果这是正确的逻辑，只需从线路中删除+1，radios[i].checked = radios[i].value.split(" ")[0] == new Date().getFullYear() - this.value+1;即可实现。

Answer 4

您不应该将事件添加到SELECT's选项中。将onchange事件添加到SELECT控件，而不是