使用html将相同结果输出到其他选择标签

Question

how can i get select option data repeat same info to other select option

like when i select name and get john to Main B then also other select tag get john or wat we got from 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> 

so i want when i select name and get data to MAIN B also get same data to MAIN A AND MAIN C its like repting same data to other select tags

Answer 1

i got this fixed by following @user5173426 post on my recently question

 <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

Try this

<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>