javascript - howto использовать переменные для выбора опции по id

Question

У меня есть две поля выбора selectA и selectB на моей странице. Теперь я хотел бы предварительно выбрать их, щелкнув ссылку: http://www.mypage.com/index.html?selectA=a132&selectB=b02#bestellung Я управляю декодированием и письмом a132 и b02 в var idA и var idB с помощью javascript. Но как я могу использовать эти переменные для запуска выбора полей? a132 - это идентификатор опции selectA. b02 - это идентификатор опции selectB.

Мой код:

<!-- decode url write vars --> 
 
<script> 
 
function getUrlVars() { 
 
var vars = {}; 
 
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, function(m,key,value) { 
 
vars[key] = value; 
 
}); 
 
return vars; 
 
} 
 
</script> \t 
 

 
<!-- set preselect --> 
 
    <script> 
 
var idA = getUrlVars()["selectA"]; 
 
var idB = getUrlVars()["selectB"]; 
 

 
document.getElementById("selectA").selectedId = idA; 
 
document.getElementById("selectB").selectedId = idB; 
 
</script> 
 

 

 

 
<!-- update Image for documentation only --> 
 
    <script> 
 
function updateImage(id, srcCallback){ 
 
\t var img = document.getElementById(id); 
 
\t if (img){ 
 
\t \t img.src = srcCallback(); 
 
\t } 
 
} 
 

 
function getImageSrc(form){ 
 
\t var sel1 = form.Size; 
 
\t var sel2 = form.Options; 
 
\t return "img/preview/" + sel1.options[sel1.selectedIndex].id + sel2.options[sel2.selectedIndex].id + ".jpg"; 
 
} 
 
</script>

<select id="selectA" name="Size" onchange="ReadForm (this.form, false);updateImage('image1', getImageSrc.bind(undefined, this.form));BeschreibungA();" required class="form-control"> 
 
    <option value="+0.00" id="a00" selected>1. Please select:</option> 
 
    <option value="wei&szlig; +15.00 Eur" id="a130">wei&szlig; 15,00 EUR</option> 
 
\t <option value="wei&szlig; | gold +10.00 Eur" id="a131">wei&szlig; | gold 10,00 EUR</option> 
 
\t <option value="gr&uuml;n | gold +12.00 Eur" id="a132">gr&uuml;n | gold 12,00 EUR</option> 
 
\t <option value="antrazith +15.00 Eur" id="a133">antrazith 15,00 EUR</option> 
 
\t <option value="natur | gold +13.00 Eur" id="a134">natur | gold 13,00 EUR</option> 
 
\t <option value="UJack +18.00 Eur" id="a135">Union Jack 18,00 EUR</option> 
 
\t <option value="StG +18.00 Eur" id="a136">StG 18,00 EUR</option> 
 
\t <option value="Streifen +18.00 Eur" id="a137">Streifen 18,00 EUR</option> 
 
\t <option value="Gold +18.00 Eur" id="a138">Gold 18,00 EUR</option> 
 
    </select> 
 

 

 
<br> 
 
<select id="selectB" name="Options" data-parent-id="selectA" onchange="ReadForm (this.form, false);updateImage('image1', getImageSrc.bind(undefined, this.form));BeschreibungB();" required class="form-control">> 
 
    <option value="+0.00" id="b99" selected >2. Please select:</option> 
 
    <option value="wei&szlig; +3.00 Eur inkl. Versand und 19% MWSt." id="b01" data-parent-option-ids="a00,a130,a131,a135">wei&szlig; (E14) 3,00 Eur</option> 
 
    <option value="orange +3.00 Eur inkl. Versand und 19% MWSt." id="b02" data-parent-option-ids="a00,a130,a131,a132,a133,a134,a138">orange (E14) 3,00 Eur</option> 
 
    <option value="pink +3.00 Eur inkl. Versand und 19% MWSt." id="b03" data-parent-option-ids="a00,a130,a131,a132,a133,a134,a138">pink (E14) 3,00 Eur</option> 
 
    <option value="rot +3.00 Eur inkl. Versand und 19% MWSt." id="b04" data-parent-option-ids="a00,a130,a131,a132,a133,a134,a135,a136,a137,a138">rot (E14) 3,00 Eur</option> 
 
    <option value="PDot +3.00 Eur inkl. Versand und 19% MWSt." id="b05" data-parent-option-ids="a00,a130,a131,a132,a133,a134,a138">polka dot rot (E14) 3,00 EUR</option> 
 
    <option value="VK Rot +3.00 Eur inkl. Versand und 19% MWSt." id="b06" data-parent-option-ids="a00,a130,a131,a132,a133">Vichy Karo rot (E14) 3,00 EUR</option> 
 
    <option value="VK Blau +3.00 Eur inkl. Versand und 19% MWSt." id="b07" data-parent-option-ids="a00,a130,a131,a132,a133">Vichy Karo blau (E14) 3,00 EUR</option> 
 
    <option value="taubengraublau +3.00 Eur inkl. Versand und 19% MWSt." id="b08" data-parent-option-ids="a00,a130,a131,a132,a133,a134,a138">taubengraublau (E14) 3,00 EUR</option> 
 
    <option value="nachtblau +3.00 Eur inkl. Versand und 19% MWSt." id="b09" data-parent-option-ids="a00,a130,a131,a132,a133,a134,a135,a136,a138">nachtblau (E14) 3,00 EUR</option> 
 
    <option value="dunkelgr&uuml;n +3.00 Eur inkl. Versand und 19% MWSt." id="b10" data-parent-option-ids="a00,a130,a131,a133,a134,a138">dunkelgr&uuml;n (E14) 3,00 EUR</option> 
 
    <option value="golden +4.00 Eur inkl. Versand und 19% MWSt." id="b11" data-parent-option-ids="a00,a130,a131,a132,a133,a134,a136,a137,a138">gold (E14) 4,00 EUR</option> 
 
    </select>

Спасибо за любую помощь, Georg

Answer 1

Если все выбрать параметры имеют идентификаторы, то вы можете просто сделать это:

document.querySelector('#' + idA).selected = true 
document.querySelector('#' + idB).selected = true