Question

道歉，如果我的问题措辞有点严厉，但我不太确定如何正确地提出这个问题。

我正在使用PHP动态生成一些选择，我只是想知道是否可以这样做？

或者我是否需要为每个选项添加{onChange="some_function();"}之类的内容，将一些变量传递给id？

<script type="text/javascript">
    $('Selects ID or class').change(function(event) {
        $.post('formupdate.php', { selected: $('Selects ID or class').val() },
            function(data) {
                $('update the div linked to select').html(data);
            }
        );
    });
</script>

<p>Q1</p>
<select name="Q1select" id="Q1select" class="Q1">
    <option value="-">-</option>
    <option value="type1">Type One</option>
    <option value="type2">Type Two</option>
    <option value="type3">Type Three</option>
</select>
<div id="update1" class="Q1"></div>
<p>Q2</p>
<select name="Q2select" id="Q2select" class="Q2">
    <option value="-">-</option>
    <option value="type1">Type One</option>
    <option value="type2">Type Two</option>
    <option value="type3">Type Three</option>
</select>
<div id="update2" class="Q2"></div>
<p>Q3</p>
<select name="Q3select" id="Q3select" class="Q3">
    <option value="-">-</option>
    <option value="type1">Type One</option>
    <option value="type2">Type Two</option>
    <option value="type3">Type Three</option>
</select>
<div id="update3" class="Q3"></div>

更新了工作脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $('.question').change(function (event) {
            var $this = $(this);
            $.post('formupdate.php', { selected:$this.val() },
                function (data) {
                    $('#' + $this.data('div')).html(data);
                }
            );
        });
    });
</script>

更新了html：

<select name="select_Q1" id="select_Q1" class="question" data-div="update_Q1">
   <option value="-">-</option>
   <option value="type1">Type One</option>
   <option value="type2">Type Two</option>
   <option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>
<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question" data-div="update_Q2">
   <option value="-">-</option>
   <option value="type1">Type One</option>
   <option value="type2">Type Two</option>
   <option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>
<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question" data-div="update_Q3">
   <option value="-">-</option>
   <option value="type1">Type One</option>
   <option value="type2">Type Two</option>
   <option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>

Answer 1

您可以使用以下命令为所有选择元素分配事件处理程序：

 $('select').change(function(event) {
       ....
    });

在事件处理程序中，您可以使用以下命令获取select的值：

 $(this).val()

要获取事件处理程序中select的ID，可以使用;

$(this).attr('id')

Answer 2

是的，这样可以......但你可以简化一下：

$('Selects ID or class').change(function(event) {
    $.post('formupdate.php', { selected: $(this).val() },
        function(data) {
            $('update the div linked to select').html(data);
        }
    );
});

将函数中的选择器更改为$(this)而不是类id，这样当您在多个元素上使用时它将起作用

要将选择内容与div相关联，您可以将div命名为select，即select id = select_1， div = div_1或使用data属性

<select name="Q2select" id="Q2select" data-div="divid" class="Q2">

然后在你的AJAX回调中你可以做到：

$('#' + $(this).data('div')).html(data);

这将使用div = id设置divid的HTML内容......只是一个想法

更新

首先要尝试和调试这几件事：

function (data) {
    $('#update_Q3').html(data);
}

这会将内容放在div中 - 这会检查post返回的内容是否有效，并且您可以在此处插入HTML

试试这个：

function (data) {
    alert($(this).data('div'));
}

这将通过获取div

确认您选择了正确的data

更新2

我的搞砸!!!!! $(this)无法在回调中运行，请尝试以下操作：

$('.question').change(function (event) {
      var $this = $(this);
      $.post('formupdate.php', { selected:$(this).val() },
         function (data) {
             $('#' + $this.data('div')).html(data);
         }
      );
});

我们将$(this)保存到变量$this中供以后使用

Answer 3

是的，你可以做到

//For every select whose id ends with select
$('select[id$=select]').change(function(event) {
    //getthe id so that you can post it
    var id = this.id;
    //save the variable this to another one to use in the callback
    var that = this;
    //post the selected value and thew id of the select
    $.post('formupdate.php', { selected: $(this).val(), id : id },
        function(data) {
            update the next element after the select
            $(that).next().html(data);
        }
    );
});

Answer 4

以下是我将如何操作，在每个question上使用<select>类并使用id作为唯一标识符。使用类来获取选择的好处是，如果您向页面添加任何其他选择，它们将不会受到影响。

<script type="text/javascript">
    $('.question').change(function(event) {
        $.post('formupdate.php', { selected: $(this).val() },
            function(data) {

                // lets find the div that matches this question and update it
                var questionNum = $(this).attr('id').replace('select_Q', '');
                var divId = 'update_Q' + questionNum;

                $('#' + divId).html(data);
            }
        );
    });
</script>

<p>Q1</p>
<select name="select_Q1" id="select_Q1" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>

<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>

<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>

获取动态创建的选择的值

4 个答案:

更新

更新2