jQuery附加在Click上不起作用。 它立即删除附加的项目

Question

我有两个选择标签。 当我单击链接时，我希望将所选选项附加到其他选择中，但是在附加后立即将其删除。 这是我的代码。

<select id="senroll" multiple="multiple" name="esubject">

</select><br /><br />
<label for="lsubject">Subject List</label></br>
<select id="slist" multiple="multiple" name="lsubject">
  <?php foreach($slist as $subject): ?>
      <?php echo "<option value='" . $subject['s_id'] . "'>" .   
       $subject['sname'] . "</option>"; ?>
  <?php endforeach; ?>
</select><br /><br />   
<a href="" id="enroll">Enroll</a>
<a href="" id="drop">Remove</a>

这是我的jQuery代码：

$(document).ready(function(){
        $('#enroll').on('click',  function(){

        var id = $('#slist').val();
        var snames = '#slist option[value="' + id + '"]';

        var sname = $(snames).text();
        var app = '<option value="' + id + '">' + sname + '</option>';
        $('#senroll').append(app);
        });
});

Answer 1

像这样吗

JSFiddle演示

$(document).ready(function(){
        $('#enroll').on('click',  function(){
        var id = $('#slist').val()[0];
        if(id){
            var snames = '#slist option[value="' + id + '"]';
          var sname = $(snames).text();
          var app = '<option value="' + id + '">' + sname + '</option>';
          $('#senroll').append(app);
        } 
        });
});

Answer 2

 $(document).ready(function() { $("#senroll").append($("<option></option>").val(1).html("One")); $("#senroll").append($("<option></option>").val(2).html("Two")); $("#senroll").append($("<option></option>").val(3).html("Three")); $('#senroll').on('click', function() { alert("I am clicked"); var id = $('#slist').val()[0]; var snames = '#slist option[value="' + id + '"]'; console.log(id, snames); var sname = $(snames).text(); console.log(sname); var app = '<option value="' + id + '">' + sname + '</option>'; $('#enroll').append(app); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <select id="senroll" multiple="multiple" name="esubject"> </select><br /><br /> <label for="lsubject">Subject List</label></br> <select id="slist" multiple="multiple" name="lsubject"> <?php foreach($slist as $subject): ?> <?php echo "<option value='" . $subject['s_id'] . "'>" . $subject['sname'] . "</option>"; ?> <?php endforeach; ?> </select><br /><br /> 

我对每个PHP都不了解更多，但是可以在您的js代码中使用

希望这可以帮助！