javascript - 如何使用javascript选择下拉选项并更改其值

Question

我有一个下拉菜单，我需要在其中放入需要用 JavaScript 转义的值。

我想使用 javascript 的原因是因为我查询的 api 正在使用 javascript，并且没有收到其他转义引号的方法。

下拉值示例:“ToxKeywords:“基因毒性” AND ToxKeywords:“ames” OR ToxKeywords:“微核””

所以我得到了这个下拉菜单:

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

我想用 javascript 替换例如 value="Query1" 。我试过这个:

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

显然我可以选择正确的值，但我不知道如何将其更改为:“ToxKeywords:\“基因毒性\”和ToxKeywords:\“ames\”或ToxKeywords:\“微核\”“

你能帮我找到正确的 Javascript 语法吗？

Answer 1

您可以使用: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&q‌​=ToxKeywords:"g‌​enotoxicity" AND ToxKeywords:"ames" OR ToxKeywords:"micronucleus"&rows=10&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>