根据相关文本选择下拉选项

Question

I have a drop down with a value and associated text as such:

echo '<option value="'.$row['company_id'].'">'.$row['company_name'].'</option>';

Eventually, the output of the selected option is put into a table, row by row. By each row, there is an edit button to edit that particular row and select a new drop down option. I'm trying to use JavaScript to select the text and when they hit the edit button, the option that is currently set will be the default choice.

So for instance, if the row says the company_name is: ABC Company, when they hit the edit button, the drop down will populate with that option. Since the value and text are different, I need to choose the drop down option based on text. I have tried these 2 options so far with no luck.

To get the row text:

var d = document.getElementById("itable").rows[id].cells[3].innerText;

I have tried the following to pass back the text of the row, and to select the drop down by text.

document.querySelector('#editinsurancepolicymodal select[name=editicompanydropdown]').value = d;

This option just populates the drop down, but no choice is selected.

document.querySelector('#editinsurancepolicymodal').find('option[text="InsuranceB"]').val;

This option selects the first option in the drop down, but doesn't change based on what the 'text' is.

Thank you for your help in advance.

Answer 1

One way will be to iterate over the option elements, selecting the one that has the same text as the text from the row, and un-selecting all the others. This is illustrated in the snippet below (I have inserted a 3 second timeout, so that you can see that the initially selected option (Two) is changed to the option with the text "Three" from the JavaScript code.

 window.setTimeout(function () { var sampleWord = "Three"; var options = document.querySelectorAll("option"); for (var i = 0; i < options.length; i++) { var option = options[i]; if (option.innerText === sampleWord) { option.selected = true; } else { option.selected = false; } } }, 3000); 

 <select id="selector"> <option id="option-1" value="1">One</option> <option id="option-2" value="2" selected>Two</option> <option id="option-3" value="3">Three</option> <option id="option-4" value="4">Four</option> </select> 

Alternately, you could store the id for the company as a data-attr attribute on the row. For example (in PHP):

echo "<td data-attr-company-id=".$row['company_id'].">".$row['company_name']."</td>"

Then, you can read the attribute from the table row, and query for the option that has the same value as your attribute value.

Answer 2

var options = document.querySelectorAll("option");

This will select all options from the page. If you want to get the options for a specific drop down, use the following:

var options = document.querySelector('#specificform select[name=specific_drop_down_in_the_specific_form]');

To select the option based on the text and not the value, use this loop:

for (var i=0; i<options.length; i++){
        var option = options[i];
        if (option.innerText === d){
            option.selected = true;
        }
    }