使用html將相同結果輸出到其他選擇標簽

Question

我怎樣才能獲得選擇選項數據重復相同的信息到其他選擇選項

就像當我選擇名稱並將john轉到Main B時，然后其他選擇標簽獲取john或wat我們從MAIN B獲得的

  $(".main").change(function(){ $("."+$(this).val()).show().siblings().not(".main").hide() }).trigger("change"); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

 <select class="main"> <option value="n">name</option> </select> <br> # MAIN B <select class="n"> <option value="1">john</option> </select> # MAIN A <select class="n"> <option value="1">get# john if MAIN B got john. its like get wat MAIN B got</option> </select> # MAIN C <select class="n"> <option value="1">get# john if MAIN B got john. its like get wat MAIN B got</option> </select> 

所以我想當我選擇名稱並向MAIN B獲取數據時，也向MAIN A和MAIN C獲取相同數據，就像將相同數據復制到其他選擇標簽一樣

Answer 1

我通過關注我最近的問題上的@ user5173426帖子來解決此問題

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $cat = $("#category1"), $subcat = $(".subcat"); var optgroups = {}; $subcat.each(function(i,v){ var $e = $(v); var _id = $e.attr("id"); optgroups[_id] = {}; $e.find("optgroup").each(function(){ var _r = $(this).data("rel"); $(this).find("option").addClass("is-dyn"); optgroups[_id][_r] = $(this).html(); }); }); $subcat.find("optgroup").remove(); var _lastRel; $cat.on("change",function(){ var _rel = $(this).val(); if(_lastRel === _rel) return true; _lastRel = _rel; $subcat.find("option").attr("style",""); $subcat.val(""); $subcat.find(".is-dyn").remove(); if(!_rel) return $subcat.prop("disabled",true); $subcat.each(function(){ var $el = $(this); var _id = $el.attr("id"); $el.append(optgroups[_id][_rel]); }); $subcat.prop("disabled",false); }); }); </script> 

  <select name="category1" id="category1"> <option value="">Select Category1</option> <option value="n">name</option> <option value="a">age</option> <option value="c">country</option> </select> <select disabled="disabled" class="subcat" id="category2" name="category2"> <option value>Select Category2</option> <optgroup data-rel="n"> <option value="1">john</option> <option value="2">dan</option> </optgroup> <!-- Education --> <optgroup data-rel="a"> <option value="1">23</option> <option value="2">24</option> </optgroup> <!-- Books --> <optgroup data-rel="c"> <option value="1">uk</option> <option value="2">usa</option> </optgroup> </select> </td> </tr> <tr> </tr> </table> <p> <select disabled="disabled" class="subcat" id="select" name="select"> <option value>Select Category2</option> <!-- Home Ware --> <optgroup data-rel="n"> <option value="1">john</option> <option value="2">dan</option> </optgroup> <!-- Education --> <optgroup data-rel="a"> <option value="1">23</option> <option value="2">24</option> </optgroup> <!-- Books --> <optgroup data-rel="c"> <option value="1">uk</option> <option value="2">usa</option> </optgroup> </select> </p> </form> 

Answer 2

嘗試這個

<select class="main" id="name">
          <option value="n">name</option>
        </select>
        <br>
        # MAIN B
        <select class="n" id="b">
          <option value="1">john</option>
        </select>

        # MAIN A

        <select class="n" id="a">
          <option value="1"></option>
        </select>

        # MAIN C
        <select class="n" id="c">
          <option value="1"></option>
        </select>



    <script>
      $('#b').on('change', function () {
    var selectedvalue = $('#ddlcompany option:selected').val();
    var d = '<option value="' + selectedvalue  + '</option>';
     $('#a').html(d);
     $('#c').html(d);
     });
    </script>