Question

我正在尝试将价格值（在“ - ”之后）显示在id为“price”的div中，并在select元素更改时更新。

<select id="product-select" name="">
    <option value="1">Product Name / Yellow / S - ISK 2.500</option>
    <option value="2">Product Name / Red / M - ISK 2.550</option>
    <option value="3">Product Name / Red / S - ISK 2.300</option>
    <option value="4">Product Name / Pink / S - ISK 3.500</option>
    <option value="5">Product Name / Green / M - ISK 6.500</option>
</select>

<div id="price">+ PRICE HERE +</div>

我尝试了几件事，但我只能得到全名，而不仅仅是价格。有人能帮忙吗？。

Answer 1

您需要为select编写更改事件，并将所选价格值附加到div：

$('#product-select').change(function(){
  $('#price').html($(this).find(':selected').text().split('-')[1]);
}).change();

<强> Working Demo

Answer 2

听起来你可以从下拉列表中检索值，这是一个好的开始。接下来你要做的就是解析价格而剩下的就剩下了。看起来你有一个特殊的格式，所以你可以尝试先找到破折号，然后使用该索引并从那里提取所有内容直到字符串的结尾。

要解决您一直希望根据用户选择的内容更新价格标签的问题，您可以倾听特定的onchange事件和Execute a JavaScript when a user changes the selected option of a element。

Answer 3

试试这个

＆＃13;

$('#product-select').on('change', function(e) {
  v = e.target.outerHTML.match(/\- (ISK.*)\<\/o/i);
  console.log(v[1])
  $("#price").html(v[1])           
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="product-select" name="">
    <option value="1">Product Name / Yellow / S - ISK 2.500</option>
    <option value="2">Product Name / Red / M - ISK 2.550</option>
    <option value="3">Product Name / Red / S - ISK 2.300</option>
    <option value="4">Product Name / Pink / S - ISK 3.500</option>
    <option value="5">Product Name / Green / M - ISK 6.500</option>
</select>

<div id="price">+ PRICE HERE +</div>

＆＃13;

Answer 4

你可以做很多事情。一个快速简单的方法是分裂：

var str = value.split("-");//value is the full name you said you got
var price = str[1].trim();//price will now be the decimal value you want
document.getElementById("price").innerHTML = price;//set the price

请注意，这不是唯一的方法，而且我使用的变量value代表您获得的全名。我不知道你是否想要改变你的价值与否。

获取select元素的值到div中

4 个答案: