当每个下拉列表动态创建ID时，jquery选择选项数据和值[关闭]

Posted 2023-04-13

【中文标题】当每个下拉列表动态创建ID时，jquery选择选项数据和值[关闭]

【英文标题】：jquery to select option data and value when each dropdown has dynamically created id [closed]

【发布时间】：2021-03-27 05:32:12

【问题描述】：

我需要根据下拉选择自动填充表单。我有多个带有动态 ID 的下拉部分。如何使用 jquery 来定位动态 id 以获取选项值和数据属性来填充输入文本区域。我可以获取预定义 id 的值，但无法触发未知 id 的 jquery。

@foreach(var number in totalNumber)

  <div class="col-12 col-md-12 col-lg-8 ml-0 pr-1">
 
   <select  name="@number"  class="form-control mb-1">

       <option>Select from the dropdown</option>
         
        @foreach(var product in @Model.ProductList)
          
            <option value="@product.productName"
                    data-pd = "@product.productDescription"
                    data-model = "@product.productModelNo">
                    @product.productName</option>
        
            
  </select>

  <input type="hidden" class="form-control mb-1" rows="1" placeholder="Product Name"/>

  <input type="hidden"  class="form-control mb-1" rows="1" placeholder="Product description"/>
    
  <input type="hidden" class="form-control mb-1" rows="1" placeholder="Product Model Number"/>
  
 </div>

我需要根据所做的下拉选择在我的输入字段中获取产品名称、产品描述和产品型号。

【参考方案1】：

首先将一些类名添加到隐藏字段中，以便 JQuery 轻松识别它们。

例如：

<input type="hidden" class="product-name form-control mb-1" rows="1" placeholder="Product Name" />
<input type="hidden" class="product-description form-control mb-1" rows="1" placeholder="Product description" />
<input type="hidden" class="product-model-no form-control mb-1" rows="1" placeholder="Product Model Number" />

然后在更改下拉列表时设置隐藏值，使用change() 方法。您可以使用parent() & find() 找到隐藏字段。

举个例子：

$('select').on('change', function () 
    var productName = this.value;
    var productDescription = $(this).find('option:selected').data("pd");
    var productModelNo = $(this).find('option:selected').data("model");
    $(this).parent().find(".product-name").val(productName);
    $(this).parent().find(".product-description").val(productDescription);
    $(this).parent().find(".product-model-no").val(productModelNo);
);

这是一个工作示例https://jsfiddle.net/54equvb0/2/

【讨论】：

我能够同时获得选定的值和数据值，但我无法使用最接近的方式为我的输入设置值。

我已经更新了答案。 parent & find 应该这样做