Already selected dropdown / combo box items should show as selected when clicked on the label

I am using label for attribute for input elements on my website which will help blind users. I have a Combobox / Drop down my code to enter the date format (month / day). Currently, if there is only one disclosure like Select Country, then click Shortcut, the already selected country reflects as selected, that's ok. I used this JQuery code:

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

      

But in Date format, since ExpiryDate uses Child Label for Under Parent Label which is used for ExpiryDate. So, in this case, my top written JQuery doesn't work. This JQuery works great for Single Dropdown and Box for dummies. But I want to select First child ie The month already selected should be selected. Please help me so I can implement it. I want to handle this when the user clicks over the Label and then the TextBox, Single Dropdown and Combobox / Multiple associated with the dropdown, the items already entered / selected should appear as selected. My HTML 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 only want to select the first child, which is already selecting items to appear as selected.

+3


source to share


1 answer


if you change the label for

to a select attribute that matches the below for the month and day you select when you click the label.



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

      

+1


source







All Articles