How to select dropdown option with javascript and change his value

Question

I've got a dropdown and I need to put values in there that need to be escaped with javascript.

The reason why I want to use javascript is because the api I query is working with javascript and don't receive the other ways to escape quotes.

Exemple of dropdown value : "ToxKeywords:"genotoxicity" AND ToxKeywords:"ames" OR ToxKeywords:"micronucleus""

So i got this dropdown :

<form method="post" name="query">
    <label for="textQuery">Choose Query from list</label>
    <select class="form-control space" name="textQuery" id="textQuery">
        <option selected disabled>Choose here</option>
        <option value="ToxKeywords:">ToxKeywords</option>
        <option value="Molecules.Main_name:">Molecule</option>
        <option value="Query1">Query 1</option>
        <option value=ToxKeywords:systemic toxicity>Query 2</option>
        <option value=ToxKeywords:"phototoxicity">Query 3</option>
        <option value=ToxKeywords:"llna">Query 4</option>
    </select>

And i want to replace for exemple value="Query1" with javascript. I tried this :

<script>
    document.getElementById("textQuery").selectedindex = "Query 1"
    select.option.value = "ToxKeywords:\"genotoxicity\" AND ToxKeywords:\"ames\" OR ToxKeywords:\"micronucleus\"";
</script>

Apparently i can select the right value but i don't know how to change it to : "ToxKeywords:\"genotoxicity\" AND ToxKeywords:\"ames\" OR ToxKeywords:\"micronucleus\""

Can you help me to find the right Javascript syntax ?

gaetanoM · Accepted Answer · 2017-07-10 14:30:51Z

1

You can use: document.querySelector(selectors);:

document.querySelector('#textQuery option[value="Query1"]').value =
           'http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&q=Tox‌Keywords:%22genotoxi‌city%22%20AND%20ToxK‌eywords:%22ames%22%2‌0OR%20ToxKeywords:%2‌2micronucleus%22&wt=‌json and i got : http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&amp;q‌=ToxKeywords:&quot;g‌enotoxicity&quot; AND ToxKeywords:&quot;ames&quot; OR ToxKeywords:&quot;micronucleus&quot;&amp;rows=10&amp;wt=json';
            
document.getElementById('textQuery').addEventListener('change', function(e) {
  console.log(this.value);
})

<form method="post" name="query">
    <label for="textQuery">Choose Query from list</label>
    <select class="form-control space" name="textQuery" id="textQuery">
        <option selected disabled>Choose here</option>
        <option value="ToxKeywords:">ToxKeywords</option>
        <option value="Molecules.Main_name:">Molecule</option>
        <option value="Query1">Query 1</option>
        <option value=ToxKeywords:systemic toxicity>Query 2</option>
        <option value=ToxKeywords:"phototoxicity">Query 3</option>
        <option value=ToxKeywords:"llna">Query 4</option>
    </select>
</form>

edited Jul 10, 2017 at 14:30

answered Jul 10, 2017 at 14:12

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gy0m Over a year ago

Thank you your code is good so i valid it but i doesn't solve my problem as the html query should be

http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&q=ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22&wt=json

and i got :

http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&amp;q=ToxKeywords:&quot;genotoxicity&quot; AND ToxKeywords:&quot;ames&quot; OR ToxKeywords:&quot;micronucleus&quot;&amp;rows=10&amp;wt=json

Gy0m Over a year ago

I found it. It was document.querySelector('#textQuery option[value="Query1"]').value ='ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22'

Collectives™ on Stack Overflow

How to select dropdown option with javascript and change his value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related