Question

我想根据另一个div的选项选择更改div的文本。我下面的脚本不起作用。有人可以帮忙吗？

<div class="field-wrap">
  <input id="amount" class="floatLabel" name="amount" type="text"/>
  <label for="amount">Fee</label>
</div>
<div class="field-wrap">
  <i class="fa fa-sort"></i>
  <select class="floatLabel" name="form">
    <option>Form 1</option>
    <option>Form 2</option>
    <option>Form 3</option>
  </select>
</div>

脚本：

$("[name='form']").change(function(){ 
    if($(this).find('option:selected').text().trim() == 'Form 1') {
      $('#amount').text("450");
    }
    if($(this).find('option:selected').text().trim(); == 'Form 2') {
      $('#amount').text("400");
    }
    if($(this).find('option:selected').text().trim(); == 'Form 3') {
      $('#amount').text("900");
    }
});

Answer 1

而不是

$(this).val()

使用

$(this).find('option:selected').text();  
// you may need to use .trim to avoid white spacses
$(this).find('option:selected').text().trim();

<强>解释

使用$(this).val()，您将获得选项的值，表示您的代码应该像这样

<select class="floatLabel" name="form">
    <option value="Form 1">Form 1</option>
    <option value="Form 2">Form 2</option>
    <option value="Form 3">Form 3</option>
</select>

但是当您没有为选项设置值时，您需要使用

获取所选的选项文本

$(this).find('option:selected').text()

对于input，您需要使用.val()代替.text()，因此您需要使用

$('#amount').val();

演示

$("[name='form']").change(function(){
    var option_text = $(this).find('option:selected').text().trim();
    if( option_text == 'Form 1') {
      $('#amount').val("450");
    }
    if( option_text == 'Form 2') {
      $('#amount').val("400");
    }
    if( option_text == 'Form 3') {
      $('#amount').val("900");
    }
}).change(); // use .change() if you need to run the change event on load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-wrap">
  <input id="amount" class="floatLabel" name="amount" type="text"/>
  <label for="amount">Fee</label>
</div>
<div class="field-wrap">
  <i class="fa fa-sort"></i>
  <select class="floatLabel" name="form">
    <option>Form 1</option>
    <option>Form 2</option>
    <option>Form 3</option>
  </select>
</div>

Answer 2

$("[name='form']").change(function() {
  if ($(this).val() == 'Form 1') {
    //$('#amount').text("450");
    $('#amount').val("450");

  }
  if ($(this).val() == 'Form 2') {
    //$('#amount').text("400");
    $('#amount').val("400");

  }
  if ($(this).val() == 'Form 3') {
    $('#amount').val("900");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-wrap">
  <input id="amount" class="floatLabel" name="amount" type="text" />
  <label for="amount">Fee</label>
</div>
<div class="field-wrap">
  <i class="fa fa-sort"></i>
  <select class="floatLabel" name="form">
    <option>Form 1</option>
    <option>Form 2</option>
    <option>Form 3</option>
  </select>
</div>

而不是$('#amount').text("450");，请使用$('#amount').val("450");。同样适用于其他选择。

Answer 3

为您的选项提供一个值，然后使用它 - 没有理由单个if，也不会混淆代码：

$('#selection').change(function() {
  $('#amount').text($(this).val());
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selection" class="floatLabel" name="form">
    <option value="450">Form 1</option>
    <option value="400">Form 2</option>
    <option value="900">Form 3</option>
  </select>
<div id="amount">

</div>

根据选项选择问题更改元素值

3 个答案: