Selectbox OnChange скопировать этот текст в div
Как я могу изменить текст div на опцию Selectbox для выбранного текста...
У меня есть selectbox с более чем 100 значениями
Сценарий: как только я выбираю опцию из окна выбора, то же значение опции (текст) должно быть заменено соответствующим текстом div, который у него есть ccy
учебный класс <div class="ccy">blablabla</div>
учебный класс...
Например: у меня есть selectbox с EUR, USD, JPY, INR и т. Д.... Если я выберу EUR из selectbox, соответствующие div с классом ccy <div class='ccy'>currency 1</div><div class='ccy'>currency 2</div>
следует изменить на <div class='ccy'>EUR</div><div class='ccy'>EUR</div>
и так далее...
FIDDLE
HTML
<select id="currencty-selectbox">
<option value="1">EUR</option>
<option value="2">USD</option>
<option value="3">JPY</option>
<option value="4">CAD</option>
<option value="5">MXN</option>
<option value="6">CZK</option>
</select>
<div class='ccy'>currency 1</div>
<div class='ccy'>currency 2</div>
JQuery
$('#currencty-selectbox').on('change', function() {
alert( $(this).find(":selected").text() );
});
6 ответов
$('#currencty-selectbox').on('change', function () {
$('.ccy').text($(this).find(":selected").text());
// ^^^^^^
}).trigger('change');
Чтобы изменить значения внутри te div, используйте тот же метод text(), который вы использовали, но со значением вроде $('.ccy').text('some new text')
проверьте этот обновленный код FIDDLE.
Вот решение: https://jsfiddle.net/ts0L5xej/ Вы можете сделать это, добавив следующие внутри вашего change
обработчик события.
$('.ccy').text($(this).find(":selected").text());
Просто trigger
change
событие и место текста.
$('#currencty-selectbox').on('change', function() {
$('.ccy').text( $(this).find(":selected").text() );
});
$('#currencty-selectbox').trigger('change');
Попробуйте это, если у вас есть те же заказы
Это будет работать для всех других валют
$('#currencty-selectbox').on('change', function() {
selected = $(this).find(":selected");
$("div[class^=c]").eq(selected.index()).text(selected.text());
}).trigger("change");
DEMO:
$('#currencty-selectbox').on('change', function() {
selected = $(this).find(":selected");
$("div[class^=c]").eq(selected.index()).text(selected.text());
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="currencty-selectbox">
<option value="1">EUR</option>
<option value="2">USD</option>
<option value="3">JPY</option>
<option value="4">CAD</option>
<option value="5">MXN</option>
<option value="6">CZK</option>
</select>
<div class='ccy'>currency 1</div>
<div class='ccy'>currency 2</div>