Question

这是该位置的下拉列表，并将更新另一个下拉列表以了解特定位置的价格

$('#my_location').change(function () {
        //updated
        var val = parseInt($(this).find('option:selected').val());

        getDayPrice(val);
    });

这是我的getDayPrice函数

function getDayPrice(my_id)
    {

        $.ajax({
            type: "POST",
            url: "getvalue.php",
            data: { id: my_id },
            dataType: "text",
            success: function(data) {
                $('#my_duration').empty();
                $('#my_duration').append(data);
                console.log(data);

                $('#txt_my_duration').val(Date.now());
                $('#txt_my_cost').val( Date.now());
            },
            error: function() {
                alert('error handing here');
            }
        });
    }

无论哪个#my_location，都会更新持续时间的下拉列表。但是，这两个文本框仅更新了第一个项目。

这是位置的示例

<select class="form-control" id="my_location" name="my_location">
<option value="1">My Home</option>
<option value="2">My Office</option>
<option value="3">My Playground</option>
<option value="4">My garage</option>
<option value="5">My Bathroom</option>
</select>

<input type="text" name="txt_my_duration" id="txt_my_duration" value="" />
<input type="text" name="txt_my_cost" id="txt_my_cost" value="" />

当Initial选择My Home并且价格下拉列表正确时，当我更改为My Office时，下拉列表也会更正，但两个文本框没有更新。当我点击返回My Home时，价格下拉列表是正确的，文本框也会更新。

为什么它只适用于第一个选项？

更新

如果我跳过ajax，无论我选择哪个下拉列表，两个文本框都会更新。

function getDayPrice(my_id)
    {

        data = "<option value="3">My Playground</option>";
                $('#my_duration').empty();
                $('#my_duration').append(data);
                console.log(data);


                var matches = data.match(/value='([^])'/i);
                var content = data.match(/>([^s]+)<\/option>/i);
                console.log(matches[1]);

                console.log(content[1]);
                //$('#txt_my_duration').val(matches[1]);
                //$('#txt_my_cost').val(content[1]);
                $('#txt_my_duration').val(Date.now());
                $('#txt_my_cost').val(Date.now());
    }

附加控制台日志

XHR finished loading: POST "http://localhost/getvalue.php".send @ jquery.min.js:5
getvalue.php:756 <option value='1'>My Home</option>
getvalue.php:760 1473924849426
getvalue.php:764 1473924849426

XHR finished loading: POST "http://localhost/getvalue.php".send @ jquery.min.js:5
getvalue.php:756  <option value='2'>My Office</option>
getvalue.php:760 Uncaught TypeError: Cannot read property '1' of nullsuccess @ getvalue.php:760c @ jquery.min.js:3fireWith @ jquery.min.js:3k @ jquery.min.js:5r @ jquery.min.js:5
jquery.min.js:5 

XHR finished loading: POST "http://localhost/getvalue.php".send @ jquery.min.js:5
getvalue.php:756 <option value='1'>My Home</option>
getvalue.php:760 1473924849436
getvalue.php:764 1473924849436

Answer 1

获取所选值

var val = parseInt($(this).find('option:selected').val());

注意：如果您有多个具有相同ID的选项，则值vill将是具有该ID的第一个选择的值

假设匹配是选项的值，而内容是文本，请执行以下操作

var matches = $(data).val();
var content = $(data).text();
$('#txt_my_duration').val(matches);
$('#txt_my_cost').val(content);

Answer 2

似乎issu是您正在动态地将选项加载到下拉列表中。如果是这样，您必须使用onchane

$('body').on('change', '#my_location', function () {
     // Do your stuff
}

jquery ajax成功下拉列表值更改但文本框没有更改

2 个答案: