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

Already-selected items of dropdown/combo box should reflect as selected on click over Label

本文关键字:项目 单击 标签 组合 选择      更新时间:2023-09-26

我在网站中使用标签作为输入元素的属性,这将帮助盲人用户。我有组合框/下拉菜单我的代码输入日期(月/日(格式。目前,如果只有一个下拉菜单,例如Select Country,然后单击Label,已经选定的国家反映为选定的,这没关系。我用过Jquery的这个代码:

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

但在日期格式的情况下,因为在用于"ExpiryDate"的父级"Label for"下有子级"Label of"。所以在这种情况下我上面写的Jquery不起作用。对于Single Dropdown和Teext框,Jquery运行良好。但我想选择第一个孩子,即Month已经选择的月份应该是选定。请帮助我,这样我就可以实现它。我想处理当用户点击标签时,文本框、单个下拉列表和组合框/多个相关的下拉列表已经输入/选择的项目应该显示为选中。我的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>

我只想选择第一个孩子已经选择的项目显示为已选择。

如果您将标签for更改为与点相关的选择属性,如下图所示,则当您单击标签时,它将进行选择。

<label for="ExpirationMonth">*Expiration Date</label>
<select id="ExpirationMonth" name="ExpirationMonth" tabindex="0">