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');

Демо: https://jsfiddle.net/tusharj/ts0L5xej/1/

Чтобы изменить значения внутри 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>

 $(".ccy").text($(this).find(":selected").text());

jsfiddle

Другие вопросы по тегам