选择下拉菜单项后获取输入值

Posted 2023-03-14

【中文标题】选择下拉菜单项后获取输入值

【英文标题】：Fetch input value after Dropdown menu item selected

【发布时间】：2018-06-27 12:22:05

【问题描述】：

我有一张关于产品的表格。它有 id、productdmc、productcode 列。 在这个选择菜单中，productdmc 正在显示。 当一个项目被选中时，标记它会随着相关行的变化而变化。这就是我所需要的。但我想不出解决办法。

产品代码。

<select class="form-control" name="productdmc" id="productdmc">
    <option disabled selected>DMC</option>
    @foreach ($product as $products)
    <option value=" $products->productdmc "> $products->productdmc </option>
    @endforeach
    </select>

相关输入

<input type="text" name="productcode" id="productcode">

这是js代码。我不知道这是有效的。这是我的实际问题。

<script type="text/javascript">
$(document).ready(function() 
    $('select[name="productdmc"]').on('change', function() 
        var tmp = $(this).val();
        if(tmp) 
            $.ajax(
                url: '/products/create/'+tmp,
                type: "GET",
                dataType: "json",
                success:function(data) 


                    $('productcode').empty();
                    $.each(data, function(key, value) 
                        $('productcode').innerhtml('<input value="'+ key +'">');
                    );


                
            );
        else
            $('productcode').empty();
        
    );
);
</script>

在我的控制器中：

$val = DB::table("products")->pluck("productdmc","productcode");
    return json_encode($val);

我知道，我搞砸了。但是代码比这复杂得多。我在这里写了这段代码（较短的版本）。不是复制粘贴。我在这里停留了一会儿。我找不到真正的解决方案是什么。 我愿意接受所有解决方案。

对不起，我的英语不好。

【问题讨论】：

问题已解决。 js 改了 $('#productcode').html(key);我忘了#标签

【参考方案1】：

innerHTML 是 HTML 元素的属性，而不是 jQuery 表示的函数。

改用html(content)，我认为它应该可以工作：

$('#productcode').html('<input value="'+ key +'">');

【讨论】：

我试过 .html, .append 但没用。问题不存在。

我忘记了#。 html(key) 也是解决方案的一部分。 $('#productcode').html(key);解决了问题。

【参考方案2】：

您的选择器错误，您忘记了“#”。

var $productCode = $('#productcode');

此外，当触发“更改”事件时，您需要获取选定的选项。

var selectedValue = $element.find('option:selected').val();

---

HTML

<select class="form-control" name="productdmc" id="productdmc">
  <option disabled selected>DMC</option>
  @foreach ($product as $products)
    <option value=" $products->productdmc "> $products->productdmc </option>
  @endforeach
</select>

<input type="text" name="productcode" id="productcode">

Javascript：

<script type="text/javascript">
$(document).ready(function() 
    $('body').on('change', 'select[name="productdmc"]', function(e) 
      var $element = $(e.currentTarget); // $(this) is also fine.
      // Get selected value
      var selectedValue = $element.find('option:selected').val();
      var $productCode = $('#productcode'); 

      // No value selected
      if (!selectedValue) 
        $productCode.val('');
        return;
      

      $.ajax(
          url: '/products/create/' + selectedValue,
          type: 'GET',
          dataType: 'json',
          error: function() 
            $productCode.val('');
          ,
          success: function(res) 
            $productCode.val('');

            if (res.length < 1) return;


            $productCode.val(res[0] || '');
            // This will populate more than 1 field. So,
            // I'm not sure about what you expect on the backend. 
            // If you want to populate more than 1, 
            // you should change the selector/field (do not use id in this case)

            // $.each(res, function(key, value) 
            //   $productCode.val(key);
            // );
         
      )
    );
);
</script>

PHP

<?php

$products = DB::table('products')->get();

return response(
  $products->pluck('productdmc', 'productcode')->toArray()
);

您可以在此处阅读有关 jQuery 选择器的更多信息：https://api.jquery.com/category/selectors/

【讨论】：

感谢您的评论。这可以工作。但主要问题是：#忘记了。正如你所说 var $productCode = $('#productcode');