JavaScript Set Selected Option By Text

In this tutorial we will show you the solution of JavaScript set selected option by text, as there are many ways with help of which we can set selected options by text with the help of JavaScript.

We can also create a custom function with help of which we can set selected options by text using JavaScript.

So, let us see the example given below with help of which we can set the selected option by text.

Step By Step Guide On JavaScript Set Selected Option By Text :-

As to get a set value in the selected option we have to first create a select and then have to create some option inside this with some values.

Now, at last how to create a button or something. On trigger or say click on which we have to set values.

So, with the assumption given let us see the codes and method which we are going to use.

<h1>
 TalkersCode
</h1>
<h1>
 JavaScript set selected option by text
</h1>
<label for="select">Choose your Favourite Car:</label>
    <select id="select">
        <option value="" selected disabled hidden>--------------</option>
        <option>
         Mercedes
        </option>
        <option>
         BMW
        </option>
        <option>
         Audi
        </option>
        <option>
         Rolls Royce
        </option>
        <option>
         Tesla
        </option>
    </select>
    <br/>
    <br/>
    <button type="button" onclick="result('Audi')">
       Audi
    </button>
    <button type="button" onclick="result('Mercedes')">
        Mercedes
    </button>
    <button type="button" onclick="result('BMW')">
        BMW
    </button>
    <button type="button" onclick="result('Rolls Royce')">
        Rolls Royce
    </button>
    <button type="button" onclick="result('Tesla')">
        Tesla
    </button>
 <script>
      function result(valueToSelect) {
   const dd = document.querySelector('select');
   dd.selectedIndex = [...dd.options].findIndex(option => option.text === valueToSelect);
      }
 </script>

1. As we here see that we today write only JavaScript codes in our example.
2. In previous tutorials, we already many times create a full code example in which we first create an HTML form with its basic structure. We use HTML, head, title, body, and script tags inside that structure.
3. As in the example given above we see that we create some heading tags. After that, we create a label and then select a tag. Inside the select tag, we create some options. You can see the options that we created above.
4. Now, after that we create some buttons. The number of buttons is equal to the number of options available in the select tag. Now, our today’s task is to set the selected option text using JavaScript. So, the ways with help of which we want to set the text inside select may be different but the method remains the same. So, as we see above that a function gets called when we click on any button.
5. Here, we see that we did not create any values inside the options. We just place the text inside the option tag and have to set the selected option by text when we click on the button. And this must be done without values inside options. And for this, we create a custom function inside JavaScript, and after this just when we click on the button the text gets passed, and when the text gets matched the option gets shown inside the select tag.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we can understand how to set selected options by keys using JavaScript.

I hope this tutorial on JavaScript set selected option by text helps you and the steps and method mentioned above are easy to follow and implement.