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

尝试使用此尺寸：

    <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 2

您的元素不需要.each()或id。基本上，您需要绑定一个事件处理程序来侦听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 3

您只需在选项中设置select，use值而不是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/

我们实际上可以通过案例陈述进一步清理它：

$('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;
  }
});

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

4 个答案: