Question

我想在使用ajax单击/选择后立即在select标记内显示该选项的值。我尝试了此代码（如下），但不起作用。

    <div class="form-group row">
        <select name="count_pax" id="count_paxx" class="form-control col-md-9"/>
            <option value="">Select how many people</option>
            <option value="1">1 pax</option>
            <option value="2">2 pax</option>
            <option value="3">3 pax</option>
            <option value="4">4 pax</option>
            <option value="5">5 pax</option>
            <option value="6">6 pax</option>
            <option value="7">7 pax</option>
            <option value="8">8 pax</option>
            <option value="9">9 pax</option>
            <option value="10">10 pax</option>
            <option value="11">11 pax</option>
            <option value="12">12 pax</option>
        </select>
    </div>
    <div class="form-group row" id="demo_paxx">
    </div>

这是我的ajax代码

    $(document).ready(function() {
        $("#count_paxx").change(function(){
            document.getElementById('$demo_paxx').innerHTML = $('#count_paxx option:selected').val();
        })
    });

Answer 1

每个选择项都有一个值，即选择的值。您将需要在更改时查找值的选项。

const selectElem = document.querySelector('#count_paxx');
const outputElem = document.querySelector('#demo_paxx');

selectElem.addEventListener('change', () => {
    outputElem.innerText = selectElem.querySelector(`option[value='${selectElem.value}']`).innerText
});

JSFIDDLE

Answer 2

composer install ID不存在（不应存在composer install --no-dev -o）。

由于您使用的是jQuery，因此您可以：

使用ID Selector和$demo_paxx选择它，
使用检索选定的值 $元素上的.val()，
使用.text()来更改其内容。

演示：

$('#demo_paxx')

select

单击AJAX时如何显示所选选项标签的值

2 个答案: