複数のドロップダウンから値を取得する（選択オプション）

私は外部の.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

idsは単数形です。 – 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

外部ページに行っていないようです。 –

あなたが選んだものによって、個々のいずれかを選択することはできませんので、Idsは単数形です。それを行うには多くの方法がありますが、1つの方法はイベントを渡してターゲットを読み取ることです。

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>

だから、あなたはその原料を想定している

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

または

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

ことにconsole.logラインを変更するよりも、貴社のコードに有効です表示されません。

出典

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）; } –

複数のドロップダウンから値を取得する（選択オプション）

答えて

関連する問題