Avatar of fmichail
fmichail
Flag 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 vb.net


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 vb.net 

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>
   </select>
   <div class="chosen-container chosen-container-single" title="" id="ddleducation_chosen" style="width: 263px;">
      <a class="chosen-single">
         <span>No Education</span>
         <div><b></b></div>
      </a>
      <div class="chosen-drop">
         <div class="chosen-search">
            <input class="chosen-search-input" type="text" autocomplete="off">
         </div>
         <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>
         </ul>
      </div>
   </div>
</div>

JavaScriptVisual Basic.NETHTML

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
leakim971

test page : https://jsfiddle.net/o4mhq0eb/
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

fmichail

ASKER
Thanks leakim971 for the reply, and the test page
I tried your code from vb.net 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
leakim971

put all in one, not three
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
fmichail

ASKER
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


leakim971

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


fmichail

ASKER



Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

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

fmichail

ASKER

leakim971

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?
Your help has saved me hundreds of hours of internet surfing.
fblack61
fmichail

ASKER
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
leakim971

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

fmichail

ASKER
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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
fmichail

ASKER


After 20 seconds
leakim971

do you have the list visible without doing anything on the page?
fmichail

ASKER
No, You click on the list and that shows you a kind of search list Like this
what are you thinking of, my friend?

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
leakim971

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
fmichail

ASKER
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


fmichail

ASKER
If this means the object is not Null anymore... is there a Java script magic to mimic clicking on the ddl?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
leakim971

Vanilla JS :
document.getElementById('ddleducation').selectedIndex = 4

Open in new window

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

Open in new window

or :
$('#ddleducation').val(4);

Open in new window