psobhan psobhan - 2 months ago 11
jQuery Question

How to bind drop down based on selected text

I have a drop down list as follows:

<select name="ddTblrule" id="ddTblrule" class="controlFont controlWidth">
<option value="Abc">Abc [ abc ]</option>
<option value="Abc">Abc [ abc1 ]</option>
<option value="Abc">Abc [ abc2 ]</option>
<option value="Abc Associations">abc Associations [ abcas ]</option>
</select>


Since the values of drop down are the same (It should be same, as values are depended on other textbox). I have a grid which contains the selected drop down text in it. when user clicks on edit button I have to show the respective text selected in drop down for which I am using the following code.

var ruleObj = data.find('td:eq(3)').text();
$("#ddTblrule option").removeAttr("selected");
$("#ddTblrule option").filter(function () {
return this.text == ruleObj;
}).attr('selected', true);


But the data is not displaying properly in drop down. Please help

Answer

According to your question I think you are looking for something like following.

$('#edit').click(function() {
    var ruleObj = 'Abc [ abc2 ]';
    $("#ddTblrule option").filter(function() {
        return $(this).text() == ruleObj;
    }).prop('selected', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ddTblrule" id="ddTblrule" class="controlFont controlWidth">
    <option value="Abc">Abc [ abc ]</option>
    <option value="Abc">Abc [ abc1 ]</option>
    <option value="Abc">Abc [ abc2 ]</option>
    <option value="Abc Associations">abc Associations [ abcas ]</option>
</select>

<button id="edit">Edit</button>

Comments