已下拉/组合框的已选择项目应反映在点击标签时所选择的项目 [英] Already-selected items of dropdown/combo box should reflect as selected on click over Label

问题描述

我使用标签作为输入元素的属性，在我的网站，将帮助盲人用户。我有Combobox /下拉在
我的代码输入日期（月/日）格式。目前如果只有单个下拉，例如选择国家，然后点击标签，
已经选择的国家反映为选择，那就没关系。我使用这个代码的Jquery：

I am using label for attribute for input elements in my website that will help blind users. I have Combobox/Drop down in my code to enter Date (Month/Day) format. Currently if there is only single drop down , for example Select Country, then on click on Label, already selected country is reflecting as selected, that is okay. I have used this code of Jquery:

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

但是在日期格式的情况下，有'child'用于ExpiryDate。所以在这种情况下
我上层写的Jquery不工作。
Jquery正在单下拉框和Teaxt框正常工作。但我想选择第一个孩子，即月份已经选择的月份应该选择
。请帮助我，以便我可以实现它。我想处理，当用户点击标签，然后TextBox，单个下拉菜单和组合框/多个相关下拉菜单已经输入/选择项目应该
显示为选定。
我的HTML代码在这里：

But in Case of Date format as there are Child 'Label for' under Parent 'Label for' that is used for "ExpiryDate". So in this case my upper written Jquery is not working. That Jquery is working fine for Single Dropdown and for Teaxt boxes. But I want to select First child i.e. Month's already selected month should be selected. Please assist me so that I can implement it. I want to handle that when user click over Label then TextBox, Single Dropdown and Combobox/Multiple related dropdown's already entered/selected items should be shown as selected. My HTML Code is here:

<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>

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

I want to select only first child's already select items to shown as selected.

推荐答案

如果您将标签更改为指向相关的选择属性，如下面的月份和日期

if you change your label for to point related select attribute like below for month and day it will select when you click label.

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

这篇关于已下拉/组合框的已选择项目应反映在点击标签时所选择的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！