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

当我单击“添加另一个工作人员”按钮并将pre

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');
    });
});

$（文档）.ready（函数（）{
$（'.worker'）。在（'click'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
var title=$（'.title'）.val（）；
var-worker='选择标题BossWorkerManager'；
$（'.addmore'）.append（worker）；
$（'.title:first'）.val（'选择一个标题'）；
});
});

HTML

选择一个标题
老板
工人
经理

---

这里是我的JSFIDLE的链接

如果我理解正确，您试图通过单击按钮将新的

select

附加到您的

div

。如果是这样，一个简单的方法就是重新构造html，使其具有

。在实际（或初始选择框）之前添加更多的
div

工作小提琴：

编辑如果您不想像您在评论中所说的那样更改
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');
    });
});

$（文档）.ready（函数（）{
$（'.worker'）。在（'click'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
var getValue=$（'.title:first'）.val（）
var-worker='选择标题BossWorkerManager'；
$（'.addmore'）.append（worker）；
$（'.title:eq（+$（'.newSelect'）.length++'））.val（getValue）；
$（'.title:first'）.val（'选择一个标题'）；
});
});

工作小提琴：

Edit2:如果替换以下代码，即使@KAD代码也可以正常工作：

jqueryselect.val（$（'.title:last'）.val（））带有
jqueryselect.val（$（'.title:first'）.val（））
您可以直接从select的html字符串创建jquery对象，并使用最后一个
的值设置其值。title
select：

$(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');
    });
});

$（文档）.ready（函数（）{
$（'.worker'）。在（'click'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
var title=$（'.title'）.val（）；
var-worker='选择标题BossWorkerManager'；
//创建jquery对象并设置值
var jqueryselect=$（worker）；
jqueryselect.val（$（'.title:first'）.val（））；
//这也可以组合成一行
//$（worker.val（$（'.title:first'）.val（））；
$（'.addmore'）.append（jqueryselect）；
$（'.title:first'）.val（'选择一个标题'）；
});
});

你能试试这个吗

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');
    });
});

$（'.worker'）。在（'click'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
调试器；
var title=$（'.title'）.val（）；
所选变量=$（'#select1'）.val（）；
var-worker=''；
工人+='选择一个标题'；
如果（所选==“Boss”）{
工人+=‘老板’；
工人+=‘工人’；
工人+=‘经理’；
}      
else if（所选==“工人”）{
工人+=‘老板’；
工人+=‘工人’；
工人+=‘经理’；
}
else if（已选==“经理”）{
工人+=‘老板’；
工人+=‘工人’；
工人+=‘经理’；
}
否则{
工人+=‘老板’；
工人+=‘工人’；
工人+=‘经理’；
}
$（'.addmore'）.append（worker）；
$（'.title:first'）.val（'选择一个标题'）；
});
});

工作环节

您能否对实际发生的情况给出更具描述性的解释？当单击“添加另一个工作人员”按钮时，我正在尝试将所选值传递到生成的“选择”菜单。您是否可以尝试此工作链接@Hudhaifa yoosu如果代码似乎工作正常，但是否有其他方法缩短代码以避免重复另一方面，这就是我一直在寻找的。谢谢答案如下。但我真的需要将
保留在原来的位置。不是真的，我需要css代码和html代码保持不变。这似乎将相同的值从第一次添加传递到所有其他添加选项。不，在创建新选项时更改值，无论我选择了多少次不同的选项并添加它，您都会得到最后一次选择的值我会一直得到第一次选择的选项的相同值。
$(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');
    });
});

<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');
    });
});