如何从下拉列表中获取选择值的 ID 并使用 ajax 将其发送到 php 中的模式？答案

【问题标题】：How get the ID of select value from a dropdownlist and send it to a modal in php with ajax?如何从下拉列表中获取选择值的 ID 并使用 ajax 将其发送到 php 中的模式？
【发布时间】：2019-06-30 14:10:43
【问题描述】：

按钮：

echo CHtml::link('',array('modelo/ajaxnuevomodelo','id'=>$model->marcaID),array('class'=>'btn btn-sm btn-primary',' data-placement'=>'top','data-target'=>'#extraModal', 'data-toggle'=>'modal','onclick'=>'AjaxExtra($(this).attr("href "))')); ?>

ajax函数

    $('#Vehiculo_marcaID').change(function(){
        //var vehiculomarca = jQuery('#Vehiculo_marcaID').val();
        var vehiculomarca = $('#Vehiculo_marcaID').val();

//我不知道该怎么办！！！ });

【问题讨论】：

您是否尝试过发送 ajax 请求？
我对ajax有点了解，我是初学者，但是是的，我没有得到好的结果。 ://
展示你的糟糕结果，因为有必要了解你试图达到的目标
我已经删除了我尝试过的所有代码，我得到了这个： $('#Vehiculo_marcaID').change(function(){ //var vehiculomarca = jQuery('#Vehiculo_marcaID' ).val(); var vehiculomarca = $('#Vehiculo_marcaID').val(); }); gbillig的例子很好，得到id，现在我需要把这个发送到modal的按钮上。
这个问题有什么更新吗？我的回答是否澄清了您的问题？如果是，请考虑接受答案。 :)

标签： javascript php jquery ajax yii

【解决方案1】：

Segue um exemplo funcional 翻译这是一个功能示例

$(document).ready(function(){
    $("select#Vehiculo_marcaID").change(function(){
        var marca = $(this).children("option:selected").val();
        alert("Você selecionou a marca - " + marca);
    });
});

你可以这样做

$("#btnid").on('click', function(){
  let marca = $("select#Vehiculo_marcaID").children("option:selected").val();
  let modelo = $("select#Vehiculo_modeloID").children("option:selected").val();
  Here the rest of your logic to open the modal
});

【讨论】：

由于 OP 用英语提问，所以只适合用英语回答。
哦，是的，谢谢，它有效，....现在我需要通过该链接将这个 marca 发送到模态 CHtml::link('',array('modelo/ajaxnuevomodelo','id '=>$model->marcaID),array('class'=>'btn btn-sm btn-primary','data-placement'=>'top','data-target'=>'#extraModal', 'data-toggle'=>'modal','onclick'=>'AjaxExtra($(this).attr("href"))')); ?> :D
@Bernhard Plis 解释
你使用的是什么模式？

【解决方案2】：

您的问题缺少一些关键信息。首先，HTML 标记具体是什么？我们没有任何 id、class 或类似符号来制作正确的 selector 来获取您想要的值。

但是，我将尝试对您在这方面的问题发布适当的答案，尽管由于缺乏信息，我将使用一些伪符号。一般要点应该适用于手头的问题。

就这样吧。

根据我们从您的屏幕截图中可以看出，您有一个 <select> 元素，其中包含一些您希望通过 AJAX 函数解析的选项。看到您可以有多个选择（通过“+”按钮判断），最简单的方法是使用 serialize() 函数（注意这是一个 jQuery 表示法），将您的输入序列化为数组格式。然后，您需要在选择处理由 AJAX 函数解析的数据的任何位置遍历该数组。

为了序列化您的数据，您需要一个包含输入数据的元素。我的猜测是您已经有一个包含您的输入的 <form> 元素或类似元素（div 元素也可以）。

包含您的输入元素的这个元素需要有一个 id 或类似的属性，以便我们在序列化数据方面有一些目标。

示例：

<div id="myForm">
    <select class="mySelect">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
    </select>
</div>

在上面给出的示例中，我有一个包含我的选择的 div 元素（可以是多个选择，没关系）。我给了我的 div 元素一个名为 myForm 的 id。我现在可以在我的选择器中使用这个 id 来定位该元素并序列化其中的数据（在本例中为选择）。

所以在我的例子中，我的选择器看起来像这样（在 jQuery 表示法中）：

$('#myForm').serialize();.

请注意，有两种方法可以对数据进行序列化，具体取决于您的需要。 .serialize(); 是序列化数据的标准 url 编码格式。另一个选项是.serializeArray();，它为您提供一个 JSON 对象。这完全取决于您希望使用哪种数据格式。

有了这些信息，我们现在可以继续讨论 AJAX 函数本身。请注意，我将使用 jQuery 表示法。我特别喜欢 AJAX 函数的 jQuery 表示法，因为它易于阅读和理解。另请注意，我将使用我自己指定的伪符号来保持我目前在整个答案中呈现的内容的连续性。

AJAX 函数示例：

<script>
function submitData() {
    $.ajax({
        type : "POST",
        url : "/your_page.php",
        data : {
            formData=$('#myForm').serialize()
        },
        success: function (html) {
            //do something on success
        }
    })
}
</script>

首先在 AJAX 函数中，我们在 type: 选项中定义我们的数据将如何被解析。最常见的类型是POST 和GET。您可以查看这两种解析数据的方法之间的差异，并确定哪种方法更适合您的解决方案。在您的情况下，我猜想更好的选择是使用 POST。

其次，我们选择数据将被发送到哪里（具体是什么页面/网址）。这是数据将被发送到的地方，您将在此处处理数据以做任何您想做的事情。

第三，我们指定要发送的数据。这可以追溯到我已经接触过的关于选择器和序列化数据到一个数组中的内容，您可以循环访问该数组以获得指定的结果。

最后我还包括了一个success函数，如果你希望在成功时有一些额外的功能。这可能是给用户的消息，通知他们他们实际上已经发送了数据以进行评估或您希望执行的任何操作。你可以完全忽略它，但我个人认为这是一个很好的功能。你可以用它做很多事情。

请注意，我已将 AJAX 函数本身封装在另一个名为 submitData() 的函数中。您可以通过在提交数据的按钮上添加 onclick 属性来触发此操作。您还可以使用 onclick function 来处理 AJAX 函数，如果我完全诚实的话，这将是一个更好的例子。 $('#myButton').on("click", function() { //do the AJAX function });.

所以这基本上就是使用 AJAX 的方法。希望这会有所帮助！

【讨论】：