Link to home
Start Free TrialLog in
Avatar of fmichail
fmichailFlag for Canada

asked on

Javascript to select a value from a list of options

Hi Experts, 

I am very poor in Javascript, and I met some needs to use it in limited scope, where I want to select a value from a list in the browser using

Here is the HTML element that I want to have a short Javascript to select the value 5 (higher education) programmatically. Please help me by providing the Javascript to do that

I tried the following using 

x = WebView.ExecuteScriptAsync($"document.getElementById('ddleducation').value='5';")

But it still selects option 1 (No Education). Please help. Thanks

<div class="form-group">
   <label for="ddleducation" class="TDControl1 " width="20%" style="padding-bottom:0px">Education<font color="red">*</font></label>
   <select name="ddleducation" id="ddleducation" class="chosen-select " style="width: 90%; display: none;">
      <option value="1">No Education</option>
      <option value="2">Primary School</option>
      <option value="3">High School</option>
      <option value="4">College Edu.</option>
      <option value="5">Higher Edu.</option>
      <option value="99">Other</option>
   <div class="chosen-container chosen-container-single" title="" id="ddleducation_chosen" style="width: 263px;">
      <a class="chosen-single">
         <span>No Education</span>
      <div class="chosen-drop">
         <div class="chosen-search">
            <input class="chosen-search-input" type="text" autocomplete="off">
         <ul class="chosen-results">
            <li class="active-result result-selected" data-option-array-index="0">No Education</li>
            <li class="active-result" data-option-array-index="1">Primary School</li>
            <li class="active-result" data-option-array-index="2">High School</li>
            <li class="active-result" data-option-array-index="3">College Edu.</li>
            <li class="active-result" data-option-array-index="4">Higher Edu.</li>
            <li class="active-result" data-option-array-index="5">Other</li>

Avatar of leakim971
Flag of Guadeloupe image

test page :
document.getElementById('ddleducation').selectedIndex = 4;
document.querySelector("div.chosen-drop ul.chosen-results li.result-selected").classList.remove("result-selected")
document.querySelectorAll("div.chosen-drop ul.chosen-results li")[4].classList.add("result-selected"); 

Open in new window

Avatar of fmichail


Thanks leakim971 for the reply, and the test page
I tried your code from here is the code

        x = WebView.ExecuteScriptAsync($"document.getElementById('ddleducation').selectedIndex = 4;")
        x = WebView.ExecuteScriptAsync($"document.querySelector(""div.chosen-drop ul.chosen-results li.result-selected"").classList.remove(""result-selected"");")
        x = WebView.ExecuteScriptAsync($"document.querySelectorAll(""div.chosen-drop ul.chosen-results li"")[4].classList.add(""result-selected"");")

but I still get the same previous selected value (Index 0). I must be doing something wrong. Please help. Thanks
put all in one, not three
Hi leakim971
I constructed one string that I executed together. It is still having the same problem. Here is the string that I am executing
$"document.getElementById('ddleducation').selectedIndex = 4; document.querySelector("div.chosen-drop ul.chosen-results li.result-selected").classList.remove("result-selected"); document.querySelectorAll("div.chosen-drop ul.chosen-results li")[4].classList.add("result-selected");
I had some challenges with the double-quote in constructing the string which always includes double-quotes in couples, and finally, I displayed the string in a textbox (textbox3) and used the textbox3. text to have the final script contents without repeated double-quotes, that I am showing in my message
and the final statement that I execute is
x = WebView.ExecuteScriptAsync(TextBox3.Text)

still no luck, I must be doing something wrong... Sorry, please help

what do you get in the alert with the following :
x = WebView.ExecuteScriptAsync($"alert(document.getElementById('ddleducation'));")

Open in new window

and this one (test separately) :
x = WebView.ExecuteScriptAsync($"alert(document.querySelector('div.chosen-drop ul.chosen-results li.result-selected'));")

Open in new window

User generated image
User generated image
thank you.
what about (you should get the alert after 5s) :
x = WebView.ExecuteScriptAsync($"setTimeout(()=> {alert(document.querySelector('div.chosen-drop ul.chosen-results li.result-selected'));},5000);")

Open in new window

User generated image
that mean it doesn't find the list you posted in your original post
could you post a link to your page or confirm what you change?
I appreciate your help so much...Please keep on. Here is the html of the body. If you want me only to get you the snippet of interest I can do that... It is not easy to give you a link to the page because if you are not logged in it will direct you to a login screen. The html is attached to_leakim_971.htm
let's go for 20s...
x = WebView.ExecuteScriptAsync($"setTimeout(()=> {alert(document.querySelector('div.chosen-drop ul.chosen-results li.result-selected'));},20000);")

Open in new window

Dear leakim971
I have a meeting now and I will have to leave for about 2 hours, I will resume our sessions after that so please excuse me for that...
once again, I appreciate your dedication and valuable help so much. Thanks

User generated image
After 20 seconds
do you have the list visible without doing anything on the page?
No, You click on the list and that shows you a kind of search list Like this
User generated imagewhat are you thinking of, my friend?

so this is a yes as you need to click on the list first to get the option
so before the 20s, could you just click on it to see it but do nothing else

document.querySelector('div.chosen-drop ul.chosen-results li.result-selected')

this command select a li with the class result-selected under a ul with the class chosen-results which itself is under a div with the class chosen-drop
if one of these class or element are missing it will return nul (what you get in the alert and "nothing" happen
What you say makes sense (although Javascript to me is like chemistry, and accordingly debugging is a nightmare !)
I kept only the two timed alerts, and after I released the first one (the 5 sec) I just clicked on the ddleducation ddl and got the following... I believe you are on the correct track

User generated image
If this means the object is not Null anymore... is there a Java script magic to mimic clicking on the ddl?
Avatar of leakim971
Flag of Guadeloupe image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Vanilla JS :
document.getElementById('ddleducation').selectedIndex = 4

Open in new window

jQuery equivalent :
$('#ddleducation').attr('selectedIndex', 4);

Open in new window

or :

Open in new window