Question

如何将div文本更改为Selectbox选项所选文本...

我有一个超过100个值的选择框

情境： 只要我从selectbox中选择一个选项，相同的选项值（文本）就必须被相关的div文本替换，它具有ccy class <div class="ccy">blablabla</div> class ...

例如：我有一个带有欧元，美元，日元，英镑等的选择框...如果我从选择框中选择 EUR ，那么有类 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() );
});

Answer 1

$('#currencty-selectbox').on('change', function () {
    $('.ccy').text($(this).find(":selected").text());
    // ^^^^^^
}).trigger('change');

演示：https://jsfiddle.net/tusharj/ts0L5xej/1/

Answer 2

如果您有相同的订单，请尝试此操作

这也适用于所有其他货币

$('#currencty-selectbox').on('change', function() {
selected = $(this).find(":selected");
$("div[class^=c]").eq(selected.index()).text(selected.text());
}).trigger("change");

DEMO：

＆＃13;

$('#currencty-selectbox').on('change', function() {
  selected = $(this).find(":selected");
   $("div[class^=c]").eq(selected.index()).text(selected.text());
}).trigger("change");

＆＃13;

<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>

＆＃13;

Answer 3

以下是解决方案：https://jsfiddle.net/ts0L5xej/ 您可以通过在change事件处理程序中添加以下内容来完成此操作。

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

Answer 4

只需trigger change个事件并放置文字。

$('#currencty-selectbox').on('change', function() {
  $('.ccy').text( $(this).find(":selected").text() );
});
$('#currencty-selectbox').trigger('change');

Working Demo

Answer 5

要更改te div中的值，请使用您使用的相同text（）方法，但使用类似$('.ccy').text('some new text')的值

检查此FIDDLE更新的代码。

Answer 6

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

jsfiddle

Selectbox OnChange将此文本复制到div

FIDDLE

6 个答案: