여러 개의 드롭 다운에서 가치 얻기 (선택 옵션)

외부의 .php에 값을 보내고 싶은 몇 가지 드롭 다운 목록이 있습니다. 문제는 드롭 다운에서 값을 참조하고 드롭 다운이 사용 된 ID를 어떻게 참조 할 수 있는가입니다. 희망을 충분히 설명했다.여러 개의 드롭 다운에서 가치 얻기 (선택 옵션)

<html> 
    <head> 

     <script> 
     function sayHelloWorld() 
     { 
      var x = document.getElementById("myDropDown").selectedIndex; 
      window.location.href = "externalPHPfile.php?w1=" + x + "&w2=" + stuff; 
     } 
     </script> 

    </head> 
    <body> 

    <?php 

    for($x=0;$x<4;$x++) 
    { 
         echo(" 
         <section> 
         <select id='myDropDown' onchange='sayHelloWorld()'> 
         <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
         <option id='' value='cows'>COWS</option> 
         <option id='' value='pigs'>PIGS</option> 
         <option id='' value='chicks'>CHICKS</option> 
         </select> 
         </section> 
         "); 
    } 

    ?> 
</body> 
</html>

출처

2017-02-08 Mark James

id는 단수입니다. – epascarello

<html> 
<head> 

    <script> 
    function sayHelloWorld(elem) 
    { 
     var x = elem.selectedIndex; 
     window.location.href = "externalPHPfile.php?w1=" + x + "&w2=" + stuff; 
    } 
    </script> 

</head> 
<body> 

<?php 

for($x=0;$x<4;$x++) 
{ 
        echo(" 
        <section> 
        <select id='myDropDown' onchange='sayHelloWorld(this)'> 
        <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
        <option id='' value='cows'>COWS</option> 
        <option id='' value='pigs'>PIGS</option> 
        <option id='' value='chicks'>CHICKS</option> 
        </select> 
        </section> 
        "); 
} 

?> 
</body> 
</html>

출처

2017-02-08 13:26:50 Shubhranshu

외부 페이지로 이동하지 않는 것 같습니다. –

ID는 그래서 당신은 당신이 포착 무엇에 의해 개인 하나를 선택할 수 없습니다 단수 있습니다. 이를 수행하는 데는 여러 가지 방법이 있습니다. 한 가지 방법은 이벤트를 전달하고 대상을 읽는 것입니다.

function sayHelloWorld(event) { 
 
    var sel = event.target, //the select that was active 
 
     selIndex = sel.selectedIndex, 
 
     value = sel.options[selIndex].value; 
 
    console.log(selIndex, value); 
 
}

<section> 
 
    <select id='myDropDown1' onchange='sayHelloWorld(event)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section> 
 
<section> 
 
    <select id='myDropDown2' onchange='sayHelloWorld(event)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section>

당신은 this

function sayHelloWorld(sel) { 
 
    var selIndex = sel.selectedIndex, 
 
     value = sel.options[selIndex].value; 
 
    console.log(selIndex, value); 
 
}

<section> 
 
    <select id='myDropDown1' onchange='sayHelloWorld(this)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section> 
 
<section> 
 
    <select id='myDropDown2' onchange='sayHelloWorld(this)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section>

와 현재 개체를 전달할 수 있습니다 또는 당신은 인라인 이벤트 핸들러없이 이벤트를 추가 할 수 있습니다

function sayHelloWorld() { 
 
    var sel = this, 
 
     selIndex = sel.selectedIndex, 
 
     value = sel.options[selIndex].value; 
 
    console.log(selIndex, value); 
 
} 
 

 
var sels = document.querySelectorAll('.selNav'); 
 
for (var i=0; i<sels.length;i++) { 
 
    sels[i].addEventListener("change", sayHelloWorld); 
 
}

<section> 
 
    <select class="selNav" id='myDropDown1'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section> 
 
<section> 
 
    <select class="selNav" id='myDropDown2' > 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section>

그래서 당신은 바꿀 것보다 CONSOLE.LOG 라인은 그 물건을 가정 한 것입니다

window.location.href = "externalPHPfile.php?w1=" + selIndex + "&w2=" + stuff;

또는

window.location.href = "externalPHPfile.php?w1=" + encodeURIComponent(value) + "&w2=" + stuff;

코드에서 유효 할 수 있음을 보이지 않습니다.

출처

2017-02-08 13:29:46 epascarello

대단히 감사합니다. console.log (selIndex, value); 에 대한 것입니다. –

당신은 console.log가 무엇인지 모른다. https://developer.mozilla.org/en-US/docs/Web/API/Console – epascarello

이후 외부 페이지로 보낼 수없는 것으로 보입니다. window.location.href = "externalPHPfile.php? w1 ="+ x + " & w2 = "+ stuff; sayHelloWorld 함수() { VAR의 SEL =이, selIndex = sel.selectedIndex, 값 = sel.options [selIndex] .value; console.log (selIndex, value); } –

여러 개의 드롭 다운에서 가치 얻기 (선택 옵션)

답변

관련 문제