Question

我有一个表单，其中有8个下拉框，其中填充了数据库条目（如果没有，则为空白）。

例如：

<select name='admin_id[]' id='admin_select1st' class='listbox medium'>
<select name='admin_id[]' id='admin_select2nd' class='listbox medium'>

以及8个条目。

我正在努力（最终）当其中一个选择框被更改时，它将使用jQuery post并更新文本输入字段。

现在正在发生的事情是，当我使用以下jQuery时，我会收到每个选择框的警报（而不仅仅是我更改的那个）：

<script type='text/javascript'>
$("[id^=admin_select]").change(function() {
 alert('Handler for .change() called.');
});
</script>

现在这是预期的行为，因为我告诉它匹配任何以admin_select开头的ID。我需要知道的是，有没有一种方法可以使用这段代码而不必为每个admin_select1st，admin_select2nd，admin_select3rd等写出来，重复我的代码8次？

Answer 1

正如下面的评论中所提到的，你的问题现在应该有效。

或者你可以试试这样的东西

$("[id^=admin_select]").each(

function( intIndex ){


    $(this).change(function(){
    alert(intIndex);
    });
}
);

我没有测试过，但它应该做你想要的。

Answer 2

重复警报中的问题是，它位于生成8个选择框的while循环内部，因此代码重复了8次，因此提醒了8次。

将它移到while循环之外，现在它按预期工作。

Answer 3

假设输入文本字段ID为结果：

如果您不希望通过匹配任何ID来保留元素，您可以通过类选择器获取它们;如果你需要多次绑定代码部分，你可以使用unbind

$(document).ready(function(){
    $(".listbox.medium").each(function() {
        $(this).unbind("change").bind("change", function() {
        $("#result").val(sel.val());
        });
    });
 });

这里的完整代码

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".listbox.medium").each(function() {
                $(this).change(function() {
                    $("#result").val($(this).val());
                });
            });
        });
    </script>
</head>
<body style="background-color: rgb(78, 120, 178);"><br />
    <input type="text" id="result" value="" />
    <select name='admin_id[]' id='admin_select1st' class='listbox medium'>
        <option></option>
        <option>1</option>
    </select>
    <select name='admin_id[]' id='admin_select2nd' class='listbox medium'>
        <option></option>
        <option>2</option>
    </select>
    <select name='admin_id[]' id='admin_select3st' class='listbox medium'>
        <option></option>
        <option>3</option>
    </select>
    <select name='admin_id[]' id='admin_select4nd' class='listbox medium'>
        <option></option>
        <option>4</option>
    </select>
    <select name='admin_id[]' id='admin_select5st' class='listbox medium'>
        <option></option>
        <option>5</option>
    </select>
    <select name='admin_id[]' id='admin_select6nd' class='listbox medium'>
        <option></option>
        <option>6</option>
    </select>
    <select name='admin_id[]' id='admin_select7st' class='listbox medium'>
        <option></option>
        <option>7</option>
    </select>
    <select name='admin_id[]' id='admin_select8nd' class='listbox medium'>
        <option></option>
        <option>8</option>
    </select>
</body>

jQuery＆gt;定位动态创建的选择

3 个答案: