如何传递和删除选定的选项值

Question

当我点击Add Another Worker按钮并删除了前selected="selected"选项并将其置于新选择的选项上时，我试图让所选的选项值通过。

JQuery的

$(document).ready(function(){
    $('.worker').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();

        var title = $('.title').val();

        var worker = '<select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>';

        $('.add-more').append(worker);


        $('.title:first').val('Select a Title');
    });
});

HTML

<ul>
    <li>
        <div class="worker-container-last">
            <label class="worker-label">
                <select name="title[]" class="title">
                    <option value="Select a Title" selected="selected">Select a Title</option>
                    <option value="Boss">Boss</option>
                    <option value="Worker">Worker</option>
                    <option value="Manager">Manager</option>
                </select>
            </label>
        </div>
        <div class="add-more"></div>
        <div><a class="worker" title="" href="">Add Another Worker</a></div>
    </li>
</ul>

以下是我的jsfiddle https://jsfiddle.net/jxqyn4rg/

的链接

Answer 1

如果我理解正确，您只需点击按钮即可向select添加新的div。如果是这样，一种简单的方法是重构您的html，使其在您的实际（或初始选择框）之前有.add-more div。

<ul>
    <li>
<div class="add-more"></div>
        <div class="worker-container-last">
            <label class="worker-label">
                <select name="title[]" class="title">
                    <option value="Select a Title" selected="selected">Select a Title</option>
                    <option value="Boss">Boss</option>
                    <option value="Worker">Worker</option>
                    <option value="Manager">Manager</option>
                </select>
            </label>
        </div>

        <div><a class="worker" title="" href="">Add Another Worker</a></div>
    </li>
</ul>

你的js使用prepend代替append之类的东西：

$(document).ready(function(){
    $('.worker').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();

        var title = $('.title').val();

        var worker = '<li><select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select></li>';

        $('.add-more').prepend(worker);


        //$('.title:first').val('Select a Title');
    });
});

工作小提琴：https://jsfiddle.net/nje3opu7/

编辑如果你不想像你在评论中所说的那样改变你的HTML或CSS，你可以修改你的jQuery逻辑，以便实现你所追求的目标：

$(document).ready(function(){
    $('.worker').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();


      var getValue = $('.title:first').val()  
      var worker = '<select name="title[]" class=" newSelect title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>';
      $('.add-more').append(worker);
      $('.title:eq('+$('.newSelect').length+')').val(getValue);

      $('.title:first').val('Select a Title');
    });
});

工作小提琴：https://jsfiddle.net/97tnnyj0/

编辑2：如果替换以下@KAD代码也可以正常工作：

带有jqueryselect.val($('.title:last').val());

的

jqueryselect.val($('.title:first').val());

Answer 2

您可以直接从select的html字符串创建一个jquery对象，并使用上一个.title选择的值设置其值：

$(document).ready(function(){
    $('.worker').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();

        var title = $('.title').val();

        var worker = '<select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>';

        // create the jquery object and set the value
        var jqueryselect = $(worker);
        jqueryselect.val($('.title:first').val());

        // this can be combined to one line also
        // $(worker).val($('.title:first').val());

        $('.add-more').append(jqueryselect);


        $('.title:first').val('Select a Title');
    });
});

https://jsfiddle.net/jxqyn4rg/9/

Answer 3

你能尝试这个

吗？

<强> HTML

<ul>
    <li>
        <div class="worker-container-last">
            <label class="worker-label">
                <select name="title[]" class="title" id="select1">
                    <option value="Select a Title" selected="selected">Select a Title</option>
                    <option value="Boss">Boss</option>
                    <option value="Worker">Worker</option>
                    <option value="Manager">Manager</option>
                </select>
            </label>
        </div>
        <div class="add-more"></div>
        <div><a class="worker" title="" href="">Add Another Worker</a></div>
    </li>
</ul>

脚本

$('.worker').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();

        debugger;

        var title = $('.title').val();

  var selected = $('#select1').val();

  var worker = '<select name="title[]" class="title" >';
  worker +='<option value="Select a Title">Select a Title</option>';

  if(selected=="Boss"){
         worker+='<option value="Boss" selected="selected">Boss</option>' ;
     worker+='<option value="Worker">Worker</option>' ;
     worker+='<option value="Manager">Manager</option>' ;
  }      
  else if (selected=="Worker"){
      worker+='<option value="Boss" >Boss</option>';
     worker+='<option value="Worker" selected="selected">Worker</option>' ;
       worker+='<option value="Manager">Manager</option>' ;
  }
  else if (selected=="Manager"){
   worker+='<option value="Boss" >Boss</option>';
     worker+='<option value="Worker">Worker</option>'; 
     worker+='<option value="Manager" selected="selected">Manager</option>' ;
  }
  else{
     worker+='<option value="Boss">Boss</option>' ;
     worker+='<option value="Worker">Worker</option>' ;
     worker+='<option value="Manager">Manager</option>' ;
  }


        $('.add-more').append(worker);


        $('.title:first').val('Select a Title');
    });
});

工作链接

Code Pen Link