Получить выбранные значения из Bootstrap SelectPicker

Question

У меня есть скрипт, который использует плагин Bootstrap SelectPicker для выбора моего любимого кофе.

После отправки формы я хочу сохранить выбранные значения и отправить на addCoffee.php?coffee=${coffee}. Как мне это сделать?

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<div class="container">

  <div class="row">

    <!-- Multiple Item Picker -->
    <div class="jumbotron">
        <h2>Multiple Item Picker</h2>
        <select id="coffee" class="selectpicker show-menu-arrow" 
                data-style="form-control" 
                data-live-search="true" 
                title="-- Select your coffee --"
                multiple="multiple">
        <option data-tokens="Espresso">Espresso</option>
        <option data-tokens="Americano">Americano</option>
        <option data-tokens="Mocha">Mocha</option>
        <option data-tokens="Capuccino">Capuccino</option>
        <option data-tokens="Affogato">Affogato</option>
        <option data-tokens="Long Black">Long Black</option>
        <option data-tokens="Macchiato">Macchiato</option>
        </select>

        <p></p><input type="submit" id="submit" name="submit" value="Submit"></p>

    </div><!--.jumbotron-->

  </div><!--.row-->

</div><!--.container-->

<script>
$('#coffee').selectpicker();

$('#submit').on("click", function(e) {
    e.preventDefault();

    $('#coffee').selectpicker('refresh');

    $.ajax({
    type: "POST",
    url: `addCoffee.php?coffee=${coffee}`,

    success: function (response) {
        alert("Successfully submitted Coffee for review.");
    }
    });

})
</script>

Answer 1

Попробуйте это

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<div class="container">
            <h2>Multiple Item Picker</h2>
            <select id="coffee" class="selectpicker show-menu-arrow" 
                    data-style="form-control" 
                    data-live-search="true" 
                    title="-- Select your coffee --"
                    multiple="multiple">
                <option data-tokens="Espresso">Espresso</option>
                <option data-tokens="Americano">Americano</option>
                <option data-tokens="Mocha">Mocha</option>
                <option data-tokens="Capuccino">Capuccino</option>
                <option data-tokens="Affogato">Affogato</option>
                <option data-tokens="Long Black">Long Black</option>
                <option data-tokens="Macchiato">Macchiato</option>
            </select>

            <p></p><input type="submit" id="submit" name="submit" value="Submit"></p>
</div><!--.container-->

<script>
$('#submit').on("click", function(e) {
    var val = $('#coffee').val();
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: `addCoffee.php`,
        data: {"myData":val},
        success: function (response) {
            alert("Successfully submitted Coffee for review.");
        }
    });
});
</script>