如何从下拉列表中获取选择值的ID并将其发送到带有Ajax的php中的模式?

时间:2019-02-06 15:11:07

标签: javascript php jquery ajax yii

[1]: https://i.stack.imgur.com/8CoFa.png

按钮:

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();

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

2 个答案:

答案 0 :(得分:0)

您的问题缺少一些关键信息。首先,什么是HTML标记?我们没有ID,类或类似符号的任何符号来进行适当的选择器来获取所需的值。

但是,由于缺乏信息,尽管我将使用一些伪标记,但我将尝试为您在这方面的问题提供适当的答案。一般要点应适用于眼前的问题。

就这样。

根据我们可以从您的屏幕截图中解释的内容,您有一个<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来定位该元素并序列化其中的数据(在本例中为selects)。

因此,在我的情况下,我的选择器将如下所示(以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:选项中解析数据。最常见的类型是POSTGET。您可以查找这两种解析数据方法之间的差异,并确定哪种方法更适合您的解决方案。在您的情况下,我想最好的选择是使用 POST

其次,我们选择将数据发送到的位置(具体是哪个页面/ URL)。在此将发送数据,并在此处处理数据以执行您希望对其进行的处理。

第三,我们指定要发送的数据。这可以追溯到我已经谈到的关于选择器序列化到数组中的数据,您可以循环遍历以获得指定的结果。

最后,如果您希望成功使用一些其他功能,那么我还提供了成功函数。这可能是一条消息,通知用户,他们实际上已经发送了数据以进行评估或您希望执行的任何操作。您可以完全忽略它,但是我个人认为这是一个不错的功能。您可以用它做很多事情。

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

因此,基本上就是您可以使用AJAX做到的方式。希望这会有所帮助!

答案 1 :(得分:-1)

示例性功能 翻译 这是一个功能示例

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