如何使用JS根据组合框中的子值设置值？

Posted 2023-05-08

【中文标题】如何使用JS根据组合框中的子值设置值？

【英文标题】：How to set value according to child value in combobox using JS?

【发布时间】：2020-12-17 21:38:17

【问题描述】：

我不知道如何提出这个问题，但我正在编写一个订购鞋系统，员工为客户下订单并发货。每个鞋码都有其独特的库存，应在 html 视图中显示。我正在使用 ASP.NET MVC。 我的问题是......当我加载一个组合框值（ $('select#cars').change(function (e)) 时，股票会设置价值，但我有许多具有相同类别的股票并且他们设置相同。我想我应该在 JS 中使用父子元素。

每个产品都有带有独特鞋码的组合框，但我的客户希望它根据您的选择在每个组合框下方显示每种鞋码。

每个组合框下方的值应根据其加载的内容而变化。我正在使用ajax。

这是我的代码：

 ...table...
                <td>
                <div>
                    <select name="cars" id="cars" class="" style="width: 100%">
                        <option value=""> ... </option>

                        @foreach (var talla in item.DetalleTallas)
                        
                <option value="@talla.Talla.Id"> @talla.Talla.NombreTalla </option>
                         
                    </select>
                    <span class="existencias-talla">X</span>
                </div>
               
            </td>
       ...table...

JS代码：

$('select#cars').change(function (e) 
        e.preventDefault();

        var tallavalue = $(this).children("option").filter(":selected");


        var datos = JSON.stringify(
            valuee: tallavalue.val()
        );


        $.ajax(
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: "/Inventario/RetornarExistencia/",
            data: datos,
            success: function (result) 

                $(".existencias-talla").html(result);



            ,
            error: function () 
                alert("SE HA PRODUCIDO UN ERROR, REVISE SI LA INFORMACIÓN ESTA COMPLETA Y CORRECTA");
            
        );

    );

在 (result) 中的 JS 代码中返回每个鞋码的唯一库存，但其他鞋码同时更改。我该如何解决？

PD：我希望代码内部成功，因为它会加载库存。

【参考方案1】：

您想要在同一行内的实例，但您不能在页面中重复 ID，因此请更改为使用 <select> 上的类

$('select.className').change(function (e) 
    var $select = $(this),
        $span = $select.next()// or $select.parent().find('.existencias-talla')

    $.ajax(
       ...
        success: function (result) 

            $span.html(result);

        
        ...

【讨论】：

我认为我有义务使用 .children() 和 .parent() 东西来实现这一点。你的接近奏效了。

也可以使用$select.val()，而不是寻找选择的选项值。

你为什么使用 $select 而不是 var select？在 JS 中从未见过这样的 $。

我忘记了 var ,,,fixed。至于$variable 前缀，它是许多人用来知道变量是 jQuery 对象的约定