[英]How to display the value of the selected option tag when clicked AJAX
我想在使用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();
})
});
每个选择项都有一个值,即选择的值。 您将需要在更改时查找值的选项。
const selectElem = document.querySelector('#count_paxx');
const outputElem = document.querySelector('#demo_paxx');
selectElem.addEventListener('change', () => {
outputElem.innerText = selectElem.querySelector(`option[value='${selectElem.value}']`).innerText
});
$demo_paxx
ID不存在( $
不应存在)。
由于您使用的是jQuery,因此您可以:
演示:
$(function() { $('#count_paxx').on('change', function() { $('#demo_paxx').text($(this).val()); }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.