как в пост передать все элементы selectа

Question

помогите, пожалуйста, передать в post все элементы select1

<div class="form-group">
    <select id="select1" class="form-control" size="4" name="fruct[]" multiple>
        <option value="1">яблоко</option>
        <option value="2">апельсин</option>
        <option value="3">виноград</option>
    </select>
</div>

<div class="form-group">
    <select id="select2" class="form-control" size="4" name="fruct[]" multiple>
        <option value="1">арбуз</option>
        <option value="2">дыня</option>
        <option value="3">помидор</option>
    </select>
</div>

<div class="form-group">
    <h6>Добавить:</h6>
    <button id="js-button-1" class="btn btn-sm btn-outline-primary"> Удалить выбранный элемент</button>
    <button id="js-button-2" class="btn btn-sm btn-outline-primary">В конец</button>

</div>
<link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css">

<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
    $('.btn-default').click(function() {
        $('#select option:contains("новый option")').remove();
    });

    // Удалить выбранный элемент
    $('#js-button-1').click(function(){
        $('#select1 option:selected').remove();
    });

    // Добавить элемент в конец select
    $('#js-button-2').click(function() {
        if ($('#select2 :selected').length) //добавлять только, если что-то выбрано.
            $('#select1').append(`<option value="" style="color:green;">${$('#select2 :selected').text()}</option>`);
    });



</script>

Answer 1

Вы можете воспользоваться двумя вариантами:

Для каждого options создать поле и передавать его в POST.
Вы можете передавать данные POST через ajax, самостоятельно собирая их через js.
Можно сделать все поля выбранными и передать через POST, но тогда будут сложности с получением выбранного поля.

Если по первому варианту, то предположим, что есть файл put.php с выводом параметров $_POST;

    $('.btn-default').click(function() {
        $('#select option:contains("новый option")').remove();
    });

    // Удалить выбранный элемент
    $('#js-button-1').click(function(){
        $('#select1 option:selected').remove();
    });

    // Добавить элемент в конец select
    $('#js-button-2').click(function() {
        if ($('#select2 :selected').length) //добавлять только, если что-то выбрано.
            $('#select1').append(`<option value="" style="color:green;">${$('#select2 :selected').text()}</option>`);
    });


    $('#js-button-3').click(function() { // Добавил кнопку сохранения. Слушаем нажатие на неё
        $('.addpost').each(function (val,val1) { // Для каждого options (с элементом addpost)
            $('<input />').attr('type', 'hidden') //создаём скрытое поле input и передаём параметры
                .attr('name', 'options[]')
                .attr('value', val1.innerHTML)
                .appendTo('#form');
        })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="put.php" id="form">
    <div class="form-group">
        <select id="select1" class="form-control" size="4" name="fruct[]" multiple>
            <option value="яблоко" class="addpost">яблоко</option>
            <option value="апельсин" class="addpost">апельсин</option>
            <option value="виноград" class="addpost">виноград</option>
        </select>
    </div>
    <div class="form-group">
        <select id="select2" class="form-control" size="4" name="fruct[]" multiple>
            <option value="арбуз">арбуз</option>
            <option value="дыня">дыня</option>
            <option value="помидор">помидор</option>
        </select>
    </div>
    <div class="form-group">
        <h6>Добавить:</h6>
        <button id="js-button-1" class="btn btn-sm btn-outline-primary"> Удалить выбранный элемент</button>
        <button id="js-button-2" class="btn btn-sm btn-outline-primary">В конец</button>
        <button id="js-button-3" class="btn btn-sm btn-outline-primary">Сохранить</button>
    </div>
</form>
<link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css">

Или использовать ajax запрос:

    $('.btn-default').click(function() {
        $('#select option:contains("новый option")').remove();
    });

    // Удалить выбранный элемент
    $('#js-button-1').click(function(){
        $('#select1 option:selected').remove();
    });

    // Добавить элемент в конец select
    $('#js-button-2').click(function() {
        if ($('#select2 :selected').length) //добавлять только, если что-то выбрано.
            $('#select1').append(`<option value="" style="color:green;">${$('#select2 :selected').text()}</option>`);
    });


    $('#js-button-3').click(function(e) {
        e.preventDefault();
        let options = [];
        $('.addpost').each(function (val,val1) {
            options.push(val1.innerHTML);
        });

        let fruct = [];
        if($('#select1 option:selected')){
            fruct.push($('#select1 option:selected').val());
        }
        if($('#select2 option:selected')){
            fruct.push($('#select2 option:selected').val());
        }
        $.ajax({
            type: "POST",
            url: 'put.php',
            data: {
                "fruct": JSON.stringify(fruct),
                "options": JSON.stringify(options)
            },
            success: function (response) {
                console.log(response);
            },
            error: function (jqXHR, exception) {
                console.log('ERROR'+exception);
            }
        });
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="put.php" id="form">
    <div class="form-group">
        <select id="select1" class="form-control" size="4" name="fruct[]" multiple>
            <option value="яблоко" class="addpost">яблоко</option>
            <option value="апельсин" class="addpost">апельсин</option>
            <option value="виноград" class="addpost">виноград</option>
        </select>
    </div>
    <div class="form-group">
        <select id="select2" class="form-control" size="4" name="fruct[]" multiple>
            <option value="арбуз">арбуз</option>
            <option value="дыня">дыня</option>
            <option value="помидор">помидор</option>
        </select>
    </div>
    <div class="form-group">
        <h6>Добавить:</h6>
        <button id="js-button-1" class="btn btn-sm btn-outline-primary"> Удалить выбранный элемент</button>
        <button id="js-button-2" class="btn btn-sm btn-outline-primary">В конец</button>
        <button id="js-button-3" class="btn btn-sm btn-outline-primary">Сохранить</button>
    </div>
</form>
<link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css">

БЛОГ НА HUSL

как в пост передать все элементы selectа

Ответы (1 шт):