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>

所以我想在选择名称并将数据发送到主B时也将相同的数据发送到主A和主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>

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

2 个答案: