Question

我尝试单击切换时将选项添加到选择菜单，但如果再次单击（取消选择）则可以将其删除。到目前为止，我可以在点击上添加单个值到选择菜单但无法将其删除（切换添加切换删除）

这是我的代码：

HTML

<div class="listview lv-user m-t-20">
    <div class="lv-item media">
            <div class="lv-title">this is test 1</div>  
            <input type="hidden" name="screen_name_test" id="screen_name_test" value="this is test 1"> 
            </div>
    </div>
     <div class="lv-item media">
            <div class="lv-title">this is test 2</div>  
            <input type="hidden" name="screen_name_test" id="screen_name_test" value="this is test 2"> 
            </div>
    </div>
    <div class="lv-item media">
            <div class="lv-title">this is test 3</div>  
            <input type="hidden" name="screen_name_test" id="screen_name_test" value="this is test 3"> 
            </div>
    </div>

Jquery的

$(".lv-item").on("click", function(){
  alert($(this).find('#screen_name_test').val());
  $(this).toggleClass("active");
  $(this).find('#account_selected').toggle();
  $('#mySelect').append($('<option>', {
    value: $(this).find('#social_media_test').val(),
    text: $(this).find('#screen_name_test').val()
    }).attr('selected',true)
  );
});

if($(".lv-item").not('active'))
{
  $('#mySelect').remove($('<option>', {
  value: $(this).find('#social_media_test').val(),
  text: $(this).find('#screen_name_test').val()
  }).attr('selected',false)
  );
}

我还创建了一个JsFiddle

Answer 1

我有一些不同的方法但很简单。请看看，无论如何它都会让我知道。

<强> Working:Example

<强> HTML

<div class="listview lv-user m-t-20">
    <div class="lv-item media">
        <div class="lv-title">this is test 1</div>
        <input type="hidden" name="screen_name_test" id="screen_name_test" value="this is test 1">
    </div>
</div>
<div class="lv-item media">
    <div class="lv-title">this is test 2</div>
    <input type="hidden" name="screen_name_test" id="screen_name_test" value="this is test 2">
</div>
</div>
<div class="lv-item media">
    <div class="lv-title">this is test 3</div>
    <input type="hidden" name="screen_name_test" id="screen_name_test" value="this is test 3">
</div>
</div>
</div>
<br>
<select id="mySelect" name="mySelect[]" multiple></select>

<强>的JavaScript / JQuery的

$(".lv-item").on("click", function () {
    alert($(this).find('#screen_name_test').val());
    var curOption = $(this).find('#screen_name_test').val();

    var sts = $('#mySelect').find('option[value="' + curOption + '"]').length;
    if (sts == false) {
        $('#mySelect').append('<option value="' + curOption + '" selected>' + curOption + '</option>');
    } else {
        $('#mySelect').find('option[value="' + curOption + '"]').remove();
    }

});

能够在点击时添加选项但无法删除它（切换）

1 个答案: