jsFiddle

Question

我想在select中发布所有选项，到目前为止我只发布一个值。我应该添加什么来发布表单中的所有选项？

这是我到目前为止的代码

    $('.add_button').click(function () {
    $('.valj_grupp_email option:selected').each(function () {
        $("<option/>").
        val($(this).val()).
        text($(this).text()).
        appendTo(".valda_grupper_email");
    //-------------------Here I need help to select all my options in .valda_grupper_email_form-------------------------//  
            $.post(
            'mail_visa_kunder.php',
            $('.valda_grupper_email_form').serialize(),
            function(data){
            $("#testar3").html(data)
            }   
        );
        return false;
    //--------------------------------------------//

    });
});

表格示例：

<form class="valda_grupper_email_form" method="post">
   <select>
      <option value="1">test1</option>
      <option value="2">test2</option>
      <option value="3">test3</option>
   </select>
</form>

我应该补充一点，我需要拥有我的HTML代码。如果我想从我的选择列表中删除某些内容，请禁止。

删除代码：

$('.delete_button').click(function () {
    $('.valda_grupper_email option:selected').each(function () {
        $(this).remove();
        $.post(
            'mail_visa_kunder.php',
            $('.valda_grupper_email_form').serialize(),
            function(data){
            $("#testar3").html(data)
            }   
        );
        return false; 
    });
});

我的申请图片让您更容易理解。

enter image description here

编辑：

$('.add_button').click(function () {
        var data = '';
        $('#valda_grupper_email option').each(function(){
            data += 'valda_grupper_email=' + $(this).val() + '&';
        });

        $.post(
            'mail_visa_kunder.php',
             data,
             function(data){
                $("#testar3").html(data)
             }   
         );
        return false;
    });
});

Edit2：它仍然只发布一个值，但现在我不需要选择它。接近解决方案：）

var emails =  '';
$('.add_button').click(function () {
    $('.valj_grupp_email option:selected').each(function () {
        $("<option/>").
        val($(this).val()).
        text($(this).text()).
        appendTo(".valda_grupper_email");

        $('.valda_grupper_email option').each(function(){
            emails += 'valda_grupper_email=' + $(this).val() + '&';
        });
        $.post(
            'mail_visa_kunder.php',
            emails,
            function(data){
            $("#testar3").html(data)
            }   
        );
        return false;
    });
});

Answer 1

我认为最简单的解决方案是将selected属性添加到每个选择中，并在其选择中设置multiple属性：

    $("<option/>")
      .val($(this).val())
      .text($(this).text())
      .attr('selected', true)
      .appendTo("#valda_grupper_email");

和

<form class="valda_grupper_email_form" method="post">
   <select id="valda_grupper_email" name="valda_grupper_email" multiple="multiple">
      <option value="1">test1</option>
      <option value="2">test2</option>
      <option value="3">test3</option>
   </select>
</form>

在上面的代码中，我将类'valda_grupper_email'更改为ID，因为我假设select是唯一的，并且使用ID最好地定位唯一元素。

如果你不想改变标记而只改变ajax调用的方式，你可以这样做：

var emails =  '';
$('#valda_grupper_email option').each(function(){
    emails += 'valda_grupper_email[]=' + $(this).val() + '&';
});

$.post(
    'mail_visa_kunder.php',
     emails,
     function(data){
        $("#testar3").html(data)
     }   
 );

Answer 2

jsFiddle

var all_options = [];

$("#valda_grupper_email option").each(function()
{
    all_options.push(this.value);
});

var myJsonString = JSON.stringify(all_options);

现在您可以在jquery POST

中发送json字符串

使用jQuery从select中POST所有OPTIONS

2 个答案:

jsFiddle