已选择的下拉/组合框项目应反映为单击标签时选择的项目

时间:2015-07-06 10:42:30

标签: javascript jquery html

我在网站中使用标签属性作为输入元素,这将有助于盲人用户。我在我的代码中使用Combobox / Dropdown来输入日期(月/日)格式。目前,如果只有一个下拉列表,例如选择国家/地区,则单击标签,已选择的国家/地区反映为已选中,即可。我使用了Jquery的代码:

$(function () {
    $('label').click(function () {
        var id = $(this).attr('for');
        $('#' + id).select();
    });
});  

但是在日期格式的情况下,因为有'标签为'在父母'标签下'用于" ExpiryDate"。所以在这种情况下,我的上层写的Jquery不起作用。那个Jquery适用于Single Dropdown和Teaxt盒子。但是我想选择第一个孩子,即应该选择月份已经选定的月份。请帮助我,以便我可以实施它。我想要处理当用户点击标签然后TextBox,单个下拉列表和组合框/多个相关下拉列表已经输入/选择的项目应该显示为选中。我的HTML代码在这里:

<div class="editor-label">
  <label for="ExpiryDate">*Expiration Date</label>
</div>

<div class="editor-field">
  <label class="accessibleText" for="ExpirationMonth">
    <label for="ExpiryDate">*Expiration Date</label>
  </label>
  <select id="ExpirationMonth" name="ExpirationMonth" tabindex="0"><option value="">Month</option>
    <option selected="selected" value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
  </select>

  <label class="accessibleText" for="ExpirationDay">
    <label for="ExpiryDate">*Expiration Date</label>
  </label>
  <select id="ExpirationDay" name="ExpirationDay" tabindex="0"><option value="">Day</option>
    <option selected="selected" value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>

  </select>
</div>

1 个答案:

答案 0 :(得分:0)

这是你期待的吗?

$(function () {
    $('label').click(function () {
        var id = $(this).attr('for');
        $('#' + id).focus();
    });
});

但这已经由浏览器完成了吗?