別のHTMLドロップダウン選択に基づいてHTMLドロップダウンの値を設定する

Question

値を選択すると、その選択に対応する表が表示されるHTMLドロップダウンリストがあります。 Addボタンもあります。 Addボタンの中には、2つの情報フィールドがあり、1つはドロップダウンボックスです。ここに私が必要としているが、理解できないものがある。追加ボタンのドロップダウンで選択した値を、最初のドロップダウンですでに選択されている数値にしたいとします。これどうやってするの？ここで

は、私がこれまで持っているコードです：

<button class="ui-button ui-corner-all ui-widget" id="insertButton">Add Supplier ID</button><br><br> 

<div id="dialog-form" title="Add Supplier ID"> 
    <p class="validateTips">All form fields are required.</p> 

<!-- Dialog box displayed after add row button is clicked --> 
    <form> 
    <fieldset> 
     <label for="mr_name">MR_ID</label> 
     <select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300"> 
      <?php foreach($user->fetchAll() as $user1) { ?> 
      <option> 
       <?php echo $user1['MR_ID'];?> 
      </option> 
     <?php } ?> 
     </select><br><br> 
     <label for="buyer_id">Supplier ID</label> 
     <input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99"> 

     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 
    </form> 
</div> 

<!-- Form -->  
<form name="myForm" action=""> 

<!-- Dropdown List --> 
    <select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);"> 
    <option selected value="select">Choose a MR_ID</option> 
     <?php foreach($users->fetchAll() as $user) { ?> 
      <option data-name="<?php echo $user['MR_ID'];?>"> 
       <?php echo $user['MR_ID'];?> 
      </option> 
     <?php } ?> 
    </select> 
</form> 

<!-- Table --> 
<p> 
    <div id="table_div"> 
     <table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none"> 
      <thead> 
       <tr class="ui-widget-header"> 
       <td>MR ID</td> 
       <td>Supplier ID</td> 
       </tr> 
      </thead> 
      <?php foreach($users_one->fetchAll() as $supp) { ?> 
      <tr> 
       <td class="mr_id"><div id="dropdown_selection"></div></td> 
       <td class="supp_id"><?php echo $supp['Supp_ID']?></td> 
      </tr> 
      <?php } ?> 
     </table> 
    </div> 

Answer 1

これはJavaScriptで行うことができます

を選択したタグでのイベントでの情報のためEvents for Selectを参照してください。

最初のドロップダウンリストに変更リスナーを追加し、HTMLからonChangeを削除します。 JavaScript内からupdatetable関数を呼び出すことができます。

javascriptの

function bindListeners() { 
    var elementToBind = document.querySelector('#mr_id'); 
    // Check if the element has loaded 
    if(elementToBind === undefined) { 
     // if not, wait 500ms and retry 
     setTimeout(bindListeners, 500);   
    } 
    else 
    { 
     // Add the event listeners 
     elementToBind.addEventListener('change', updateSelection, false); 
     elementToBind.addEventListener('click', updateSelection, false); 
    } 
} 
bindListeners(); 

function updateSelection(event) { 
    // Get the value from this select 
    var selectedValue = event.target.value; 

    // find the select object that you want to set the value for 
    var selectObjectToSet = document.querySelector('#mr_id_dialog'); 
    selectObjectToSet.value = selectedValue; 

    // Call the function that was in the onChange listener 
    updatetable(this.form); 
} 

HTML 仕入先IDに

<div id="dialog-form" title="Add Supplier ID"> 
    <p class="validateTips">All form fields are required.</p> 

<!-- Dialog box displayed after add row button is clicked --> 
    <form> 
    <fieldset> 
     <label for="mr_name">MR_ID</label> 
     <select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300"> 
      <?php foreach($user->fetchAll() as $user1) { ?> 
      <option> 
       <?php echo $user1['MR_ID'];?> 
      </option> 
     <?php } ?> 
     </select><br><br> 
     <label for="buyer_id">Supplier ID</label> 
     <input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99"> 

     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 
    </form> 
</div> 

<!-- Form -->  
<form name="myForm" action=""> 

<!-- Dropdown List --> 
    <select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);"> 
    <option selected value="select">Choose a MR_ID</option> 
     <?php foreach($users->fetchAll() as $user) { ?> 
      <option data-name="<?php echo $user['MR_ID'];?>"> 
       <?php echo $user['MR_ID'];?> 
      </option> 
     <?php } ?> 
    </select> 
</form> 

<!-- Table --> 
<p> 
    <div id="table_div"> 
     <table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none"> 
      <thead> 
       <tr class="ui-widget-header"> 
       <td>MR ID</td> 
       <td>Supplier ID</td> 
       </tr> 
      </thead> 
      <?php foreach($users_one->fetchAll() as $supp) { ?> 
      <tr> 
       <td class="mr_id"><div id="dropdown_selection"></div></td> 
       <td class="supp_id"><?php echo $supp['Supp_ID']?></td> 
      </tr> 
      <?php } ?> 
     </table> 
    </div> 
</p>