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

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

对于输入，您需要使用.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>