0

I'm trying to change a select field programatically using Javascript.

On this site : https://texttospeech.wideo.co/

I want to change the select where the user chooses the voice :

enter image description here

To do so, i'm using this code :

document.getElementsByClassName('MuiSelect-root MuiSelect-select MuiInputBase-input MuiInput-input')[0].value = 'en-AU-Standard-A';

This code SEEMS to work, the select changes for this option, but not really : when i click on the select, it goes back to the previous selection ; if i submit the form, it will submit the previous option, not the one i selected via code.

Looks like besides my code, i need to do something more. What would it be ?

delphirules
  • 6,443
  • 17
  • 59
  • 108

1 Answers1

0

Your code updates the value of the select element, but not the display text of any option. If you want a particular option to become selected (and thus, it's value would become the select element's value), you just need to make the particular option the selected option instead of setting the value of the select.

Also, your code of:

 document.getElementsByClassName('MuiSelect-root MuiSelect-select MuiInputBase-input MuiInput-input')[0].value = 'en-AU-Standard-A';

is not good code and shouldn't be used. Instead, you should use .querySelector() as shown below:

console.log("Initial value of select is: " + document.querySelector("select").value);

document.querySelector("select[name='voice'] option[value='af-ZA-Standard-A']").selected = "selected";

// For confirmation purposes:
console.log("Curent value of select now is: " + document.querySelector("select").value);
<select class="MuiSelect-root MuiSelect-select MuiInputBase-input MuiInput-input" aria-invalid="false" name="voice">
  <option value="eu-ES-Standard-A"> - Maria Henderson</option>
  <option value="gl-ES-Standard-A"> - Maria Henderson</option>
  <option value="mr-IN-Standard-A"> - Maria Henderson</option>
  <option value="mr-IN-Standard-B"> - Jack Bailey</option>
  <option value="mr-IN-Standard-C"> - Alisha Howard</option>
  <option value="af-ZA-Standard-A">Afrikaans (South Africa) - Maria Henderson</option>
  <option value="ar-XA-Standard-A">Arabic - Maria Henderson</option>
  <option value="ar-XA-Standard-B">Arabic - Jack Bailey</option>
  <option value="ar-XA-Standard-C">Arabic - Peter Moore</option>
  <option value="ar-XA-Standard-D">Arabic - Amanda Rose</option>
  <option value="bn-IN-Standard-A">Bengali (India) - Maria Henderson</option>
  <option value="bn-IN-Standard-B">Bengali (India) - Jack Bailey</option>
</select>

Lastly, please don't post pictures of code or link to your code on 3rd party sites as those links can die over time, which makes your question here meaningless for those who come across it. Always include the relevant code (as code) right in your question. :)

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thank you but your solution doesn't work also... just like my code, it will change the select element visually, but when you click on it, the previous option is still selected and if you post the form right after running your code, the previous option on the select is sent instead of the new one. You can reproduce it easily on the link i provided , just run your code and then click on the select, you will see the change isn't applied. – delphirules Mar 22 '23 at 22:42
  • @delphirules I'm sorry but you are incorrect. My code does work (just run it) and it IS the way to accomplish what you are asking for and has been for ~20 years. I've updated my answer with some `console.log()` statements to show you that the `select value` is changed. Also, my code does NOT cause any previous `option` to become selected by simply clicking on the `select`. Most likely you've got other code in your solution that is causing problems. – Scott Marcus Mar 23 '23 at 14:02
  • @delphirules Also, I do not experience any of the issues you say you are experiencing when I try your link. It seems to work just fine. – Scott Marcus Mar 23 '23 at 14:07
  • I recorded a video showing what happens : https://streamable.com/7mg686 – delphirules Mar 23 '23 at 18:16
  • @delphirules So, have you noticed that upon your page load, "English (US) - Alisha Howard" becomes the automatically selected `option`? After running my code and clicking back on the `select`, the choice does revert back to "English (US) - Alisha Howard". But it's not because of my code not working, it's because you've got code somewhere that makes that the selected `option`, otherwise why would that particular selection automatically become selected upon page load? Examining the HTML, that `option` is not set as `selected` and it's not the first `option`, so something else is doing it. – Scott Marcus Mar 23 '23 at 18:44
  • @delphirules Also, as you can see, the code sample I've provided (when you run it right here) here works without those side-effects, which really does indicate that some other code is affecting your `select`. – Scott Marcus Mar 23 '23 at 20:13
  • The problem is, even running your code, when you submit the page, actually what is submitted is 'English (US) - Alisha Howard', not the one selected by the code. My JS skills are limited and i don't know why this happens, so that's why i opened the question. Thanks anyway for trying to help, i appreciate it – delphirules Mar 23 '23 at 23:48
  • 1
    @delphirules Again, if you run my code (right here in Stack Overflow), you'll see that the problem doesn't happen. The fact that that particular choice starts out being selected when you first load YOUR page indicates that there is code somewhere else that is doing that since that choice is not marked as `selected` and is not the first choice on the list. Your problem lies elsewhere, really. – Scott Marcus Mar 24 '23 at 13:03