更新选择选项更改的跨度值

时间：2017-12-19 07:43:19

标签： javascript jquery

我有一个选择选项，也有一个带有跨度的div：

目标是在更改select选项的选项时，span的值将会改变。以下是我的想法：

$(document).ready(function() {
  var money_span = $("#amount_of_money");
  var money_value = money_span.val();
  var selected = $('#Bank_Type123 option:selected').val();

  $('#Bank_Type123').change(function(event) {
    event.preventDefault();
    money = 0;
    if (selected === "Mizuho") {
      money = 10;
    } else if (selected === "UFJ") {
      money = 11;
    } else if (selected === "Yucho") {
      money = 12;
    }
    return money;
  });
  money_value = money;
  money_span.append(money_value);
  money_span.show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bank_Type123" class="form-control">
     <option value="" disabled selected style="display:none;">Choose A Bank</option>
     <option value="Mizuho">Mizuho</option>
     <option value="UFJ" >UFJ</option>
     <option value="Yucho" >Yucho</option>
</select>

<div class="input-group px-1 py-1">
  <span class="input-group-addon">Wallet</span>
  <span id="amount_of_money" class="input-group-addon unique"></span>
  <span class="input-group-addon">JPY</span>
</div>

但是当我尝试时，在选择菜单中更改选项时，跨度中没有任何内容。

7 个答案:

答案 0 :(得分：2)

你冒昧地改变了这个

HTML 

<select id="Bank_Type123" class="form-control">
  <option value="" disabled selected style="display:none;">Choose A Bank</option>
  <option value="10">Mizuho</option>
  <option value="11">UFJ</option>
  <option value="12">Yucho</option>
</select>

<div class="input-group px-1 py-1">
  <span class="input-group-addon">Wallet</span>
  <span id="amount_of_money" class="input-group-addon unique"></span>
  <span class="input-group-addon">JPY</span>
</div>

JS 

$(document).ready(function() {
  $('#Bank_Type123').change(function(event) {
    $("#amount_of_money").text($(this).val());
  });
});

我觉得不是硬编码JS中的值，而是在select选项本身中指定它。

Working Fiddle

答案 1 :(得分：1)

这里有很多错误：

  1. 不知何故，你忘记跟踪“选定”的项目更改（它应该移动到“更改” - 事件处理程序）
  2. 相同（更不用说你忘了定义“money”变量），它也应该在事件处理程序中设置
  3. “。append”会向现有内容添加内容，但我相信您需要替换它，所以请改用“.html”

    4. 这是它应该如何工作（如果我从你的代码样本中正确理解的话）：

    $(document).ready(function () {
    var money_span = $("#amount_of_money"),
            money_value = money_span.val(),
            money = '',
            selected = $('#Bank_Type123 option:selected').val();

    $('#Bank_Type123').change(function (event) {
        event.preventDefault();
        selected = $('#Bank_Type123 option:selected').val();
        money = 0;
        if (selected === "Mizuho") {
            money = 10;
        } else if (selected === "UFJ") {
            money = 11;
        }  else if(selected === "Yucho") {
        money = 12;
        }
        money_value = money;
        money_span.html(money_value);
        money_span.show();
    });
});

答案 2 :(得分：0)

＆＃13;
＆＃13; 
$(document).ready(function() {
  var money_span = $("#amount_of_money");
  var money_value = money_span.val();
  

  $('#Bank_Type123').change(function(event) {
    var selected = $('#Bank_Type123 option:selected').val();
    event.preventDefault();
    money = 0;
    if (selected === "Mizuho") {
      money = 10;
    } else if (selected === "UFJ") {
      money = 11;
    } else if (selected === "Yucho") {
      money = 12;
    }
    money_value = money;
    money_span.text('');
  money_span.append(money_value);
  money_span.show();
  });
  
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bank_Type123" class="form-control">
     <option value="" disabled selected style="display:none;">Choose A Bank</option>
     <option value="Mizuho">Mizuho</option>
     <option value="UFJ" >UFJ</option>
     <option value="Yucho" >Yucho</option>
</select>

<div class="input-group px-1 py-1">
  <span class="input-group-addon">Wallet</span>
  <span id="amount_of_money" class="input-group-addon unique"></span>
  <span class="input-group-addon">JPY</span>
</div>
＆＃13;
＆＃13;
＆＃13;

将这些三维线移动到更改事件

中 
money_value = money;
        money_span.append(money_value);
        money_span.show();

答案 3 :(得分：0)

我认为你正在寻找这个https://jsfiddle.net/xkfqddwc/ 

$(document).ready(function () {
  var money_span = $("#amount_of_money");
  var selected ='';
  var money = '';

  $('#Bank_Type123').change(function (event) {
      event.preventDefault();
      debugger;
      selected = $(event.target).val();
      money = 0;
      if (selected === "Mizuho") {
          money = 10;
      } else if (selected === "UFJ") {
          money = 11;
      }  else if(selected === "Yucho") {
          money = 12;
      }

    money_span.html(money);
    money_span.show();
  });
});

答案 4 :(得分：0)

较短的版本可以是这样的：

var money_span = $("#amount_of_money");

$('#Bank_Type123').change(function(event) {
  event.preventDefault();
  var selected = $(this).val();

  if (selected === "Mizuho") {
    money_span.text(10);
  } else if (selected === "UFJ") {
    money_span.text(11);
  } else if (selected === "Yucho") {
    money_span.text(12);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bank_Type123" class="form-control">
     <option value="" disabled selected style="display:none;">Choose A Bank</option>
     <option value="Mizuho">Mizuho</option>
     <option value="UFJ" >UFJ</option>
     <option value="Yucho" >Yucho</option>
</select>

<div class="input-group px-1 py-1">
  <span class="input-group-addon">Wallet</span>
  <span id="amount_of_money" class="input-group-addon unique"></span>
  <span class="input-group-addon">JPY</span>
</div>

答案 5 :(得分：0)

将$('#Bank_Type123 option:selected').val();放入change事件中，如下所示：

＆＃13;
＆＃13; 
$(document).ready(function() {
  var money_span = $("#amount_of_money");
  $('#Bank_Type123').change(function(event) {
    var selected = $('#Bank_Type123 option:selected').val();
    if (selected === "Mizuho") {
      money_span.text(10);
    } else if (selected === "UFJ") {
      money_span.text(11);
    } else if (selected === "Yucho") {
      money_span.text(12);
    }
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bank_Type123" class="form-control">
     <option value="" disabled selected style="display:none;">Choose A Bank</option>
     <option value="Mizuho">Mizuho</option>
     <option value="UFJ" >UFJ</option>
     <option value="Yucho" >Yucho</option>
</select>
<div class="input-group px-1 py-1">
  <span class="input-group-addon">Wallet</span>
  <span id="amount_of_money" class="input-group-addon unique"></span>
  <span class="input-group-addon">JPY</span>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

php-mbstring
$(document).ready(function(){
$('#Bank_Type123').change(function(){
$('#amount_of_money').text($('option:selected').val())
})
})

相关问题
最新问题