Split selected value with _

I am using material css for my web page design. I am having one single select country list dropdown and the values

<select id="select_id" name="select_id" required>
  <option value="8">select1_1</option>
  <option value="15">select2_2</option>
</select>

<!-- language: lang-js -->

 $(document).ready(function() {
   $('select').formSelect();
 });

My select option are populating from a database which has an underscore in its value. I want to update the select option value at runtime on the client side and remove the underscore from options.

<select id="select_id" name="select_id" required>
  <option value="8">select1</option>
  <option value="15">select2</option>
</select>

Is there is any better way to update it using jQuery. Thanks for the help

You should keep the original value as "value" prop of the <option> tag. For the option text the best way to handle it is to create a parser parseOptionText(optionText: string): string, in this way you have full control over the logic of the parsing and the code is easy to maintain.

As final result you should have:

<option value={originalValueFromDB}>parseOptionText(originalValueFromDB)</option>

And

const parseOptionText = (optionText: string): string => {
    return optionText.replace('_', '');
}

While changing at the source is the better solution, you can update the text of an option using the .text() overload that accepts a function:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$("select option").text((i, txt) => txt.replace(/_.*$/, ''))

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_id" name="select_id" required>
  <option value="8">select1_1</option>
  <option value="15">select2_2</option>
</select>

<!-- end snippet -->

> remove the underscore from options

the above matches your sample that removes both the underscore and what follows it, to remove just the underscore:

$("select option").text((i, txt) => txt.replace(/_/g, ''))