如果选中此选项，则 var 等于此值

Question

我真的必须开始学习我的 javascript 技能了。我正在尝试，我认为使用 jquery 的简单任务，根据选择的option 为变量设置某个值。

<select>
<option>Choose size</option>
<option id="size1">1</option>
<option id="size2">2</option>
<option id="size3">3</option>
<option id="size4">4</option>
</select>

<input type="text" id="showPrice"/> 

jQuery：

var thisPrice;

$('#size1').each(function(){
    if(this.selected)
        thisPrice = 2;
        });
    $('#size2').each(function(){
    if(this.selected)
        thisPrice = 4;
        });

$('#size3').each(function(){
    if(this.selected)
        thisPrice = 5;
        });

$('#size4').each(function(){
    if(this.selected)
        thisPrice = 6;
        });


    $('#showPrice').val(thisPrice);

Link to my fiddle

我怎样才能让它工作？

Answer 1

您的元素上不需要.each()s 或ids。基本上，您需要绑定一个事件处理程序来监听select 的更改，并做出反应。我会这样做：

http://jsfiddle.net/dGHak/

$('select').on('change', function () {
    var thisPrice = '';

    switch (this.value) {
        case '1':
            thisPrice = 2;
            break;

        case '2':
            thisPrice = 4;
            break;

        case '3':
            thisPrice = 5;
            break;

        case '4':
            thisPrice = 6;
            break;
    }

    $('#showPrice').val(thisPrice);
});

这是使用data- 属性的另一个选项：

http://jsfiddle.net/9fvZq/

<select>
    <option>Choose size</option>
    <option data-price="2">1</option>
    <option data-price="4">2</option>
    <option data-price="5">3</option>
    <option data-price="6">4</option>
</select>

---

$('select').on('change', function () {
    $('#showPrice').val($(this).find('option:selected').data('price'));
});

Answer 2

试穿一下尺寸：

    <select>
        <option>Choose size</option>
        <option id="size1" value="2">1</option>
        <option id="size2" value="4">2</option>
        <option id="size3" value="5">3</option>
        <option id="size4" value="6">4</option>
    </select>
    <input type="text" id="showPrice"/>

将值放入选项中，然后您就可以使用这个简单的查询

    var changed = function(e){
       $("#showPrice").val(e.target.value);
    }
    $('select').on('change', changed);

摆弄我的木头http://jsfiddle.net/8ULeH/7/

Answer 3

您应该只为选择设置一个 id，在选项中使用 value 而不是 id 并使用：

var val = $('#theID').val();

Answer 4

将event listener 添加到select 元素更改时触发：

$('select').on('change', function () {
    var thisPrice;

    $('#size1').each(function () {
        if (this.selected) thisPrice = 2;
    });
    $('#size2').each(function () {
        if (this.selected) thisPrice = 4;
    });

    $('#size3').each(function () {
        if (this.selected) thisPrice = 5;
    });

    $('#size4').each(function () {
        if (this.selected) thisPrice = 6;
    });


    $('#showPrice').val(thisPrice);
});

http://jsfiddle.net/8ULeH/1/

我们实际上可以用 case 语句进一步清理它：

$('select').on('change', function () {
  // Gets the id of the selected option
  var theId = this.options[ this.selectedIndex ].id;
  switch (theId) {
    case 'size1':
        $('#showPrice').val(2);
        break;
    case 'size2':
        $('#showPrice').val(4);
        break;
    case 'size3':
        $('#showPrice').val(5);
        break;
    case 'size4':
        $('#showPrice').val(6);
        break;
  }
});