Question

让Suppos我有Text As

<h5 class="product-title_main">INDIAN APPLE(KASHMIR)</h5>

我有选择框

<select id="sources" class="">
    <option value="Available As Your Requirment">Available As Your Requirment</option>
    <option value="1170Kg">10Kg at 1170</option>
    <option value="3400Kg">30Kg at 3400</option>
    <option value="5700Kg">50Kg at 5700</option>
</select>

现在，我希望在更改选择框

时更改H5标记值

例如

如果我选择第二个选择框那么标签文本将变为＆＃34; INDIAN APPLE（KASHMIR）10Kg at 1170＆＃34;

我尝试过什么

<script>
        $("#sources").change(function(){
            var selectedval = $("#sources option:selected").val();
            var selectedtext = $("#sources option:selected").text();
            $(".dynamic_price").text("Rs. " + selectedval);
            $('.product-title_main').text($('.product-title_main').text() + ' ' + selectedtext);
        });
</script>

但问题是它每次都附加价值。我不希望我只想显示所选值并删除旧值。

Answer 1

您最初可以在变量<h5>中设置var h5Text = $('.product-title_main').text();文本，并使用该变量动态设置<h5>内的文字，如下所示：

$(document).ready(function(){
   
var h5Text = $('.product-title_main').text();
$("#sources").change(function(){
  var selectedval = $("#sources option:selected").val();
  var selectedtext = $("#sources option:selected").text();
  $(".dynamic_price").text("Rs. " + selectedval);
  $('.product-title_main').text(h5Text + ' ' + selectedtext);
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5 class="product-title_main">INDIAN APPLE(KASHMIR)</h5>
<select id="sources" class="">
    <option value="Available As Your Requirment">Available As Your Requirment</option>
    <option value="1170Kg">10Kg at 1170</option>
    <option value="3400Kg">30Kg at 3400</option>
    <option value="5700Kg">50Kg at 5700</option>
</select>

Answer 2

要更改h5标记的值，您只需使用.html('your new value')

更改为

$('.product-title_main').html(original_value + " " + selectedtext);

＆＃13;

var original_value = $('.product-title_main').html();
$("#sources").change(function() {
  var selectedval = $("#sources option:selected").val();
  var selectedtext = $("#sources option:selected").text();
  $(".dynamic_price").text("Rs. " + selectedval);
  $('.product-title_main').html(original_value + " " + selectedtext);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5 class="product-title_main">INDIAN APPLE(KASHMIR)</h5>

<select id="sources" class="">
  <option value="Available As Your Requirment">Available As Your Requirment</option>
  <option value="1170Kg">10Kg at 1170</option>
  <option value="3400Kg">30Kg at 3400</option>
  <option value="5700Kg">50Kg at 5700</option>
</select>

＆＃13;

选择选项后附加文本第二次jquery

2 个答案: