Select drop down list item if value match from group label?

Question

I wanna add a dynamic function that will auto select the drop down list if/with any of the value that matches the input fields label?

In the snippet bellow, Product Code should be selected ( since label IS Product Code )

 <div class="col-sm-12 col-md-4"> <div class="form-group"> <label for="">Product Code</label> <select id="ddlProductCode" class="form-control input-sm"> <option value="0"> --Select-- </option> <option value="Product Code"> Product Code </option> <option value="Product Name"> Product Name </option> <option value="Product Description"> Product Description </option> <option value="Product Category"> Product Category </option> <option value="Product Sub Category"> Product Sub Category </option> </select> </div> </div> 

Many thanks in advance! Dav

Answer 1

If I understood you correctly, this will help:

 $(function() { var $ddlProductCode = $('#ddlProductCode'); var labelValue = $select.prevAll("label:first").text(); $select.val(labelValue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-12 col-md-4"> <div class="form-group"> <label for="">Product Code</label> <select id="ddlProductCode" class="form-control input-sm"> <option value="0"> --Select-- </option> <option id="asd" value="Product Code"> Product Code </option> <option value="Product Name"> Product Name </option> <option value="Product Description"> Product Description </option> <option value="Product Category"> Product Category </option> <option value="Product Sub Category"> Product Sub Category </option> </select> </div> </div> 

Answer 2

You can loop through every option and select the one matching the label text like this:

$('option').each(function(i, option) {
    if ( option.value == $('label').text() ) {
        option.selected = "selected";
    }
});

Answer 3

Check jquery that will select the value based on the label text

 $('#ddlProductCode option:contains(' + $('#lbl').text() +')').each(function(){ if ($(this).val() == $('#lbl').text()) { $(this).attr('selected', true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-12 col-md-4"> <div class="form-group"> <label id="lbl" for="">Product Code</label> <select id="ddlProductCode" class="form-control input-sm"> <option value="0"> --Select-- </option> <option value="Product Code"> Product Code </option> <option value="Product Name"> Product Name </option> <option value="Product Description"> Product Description </option> <option value="Product Category"> Product Category </option> <option value="Product Sub Category"> Product Sub Category </option> </select> </div> </div> 

Answer 4

for (i = 0; i < yourselect.length; ++i) {
            if (yourselect.options[i].value == yourvalue) {
                yourselect.value = yourvalue;
            }
        }

Answer 5

Well unfortunately that's not the way you should be using the <label> tag.

The HTML element represents a caption for an item in a user interface. -- Mozilla docs

So, <label> is not meant to say what the value should be.
If you want to set a default value just add selected to that <option> .

I'm not entirely sure of why you would do this, so maybe I am misunderstanding but to answer your question you could set the <option> based off the label name.

There's no need to loop through the options:

$('#ddlProductCode').val($('label').text())