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

I have a table about products. It has id, productdmc, productcode columns. In this select menu, productdmc is showing. When one item was selected, label its gonna change with related rows. Thats what i need. But i cant figure out the solution.

我有一张关于产品的表。它有id,productdmc,productcode列。在此选择菜单中,将显示productdmc。选择一个项目时,标记它将随相关行更改。这就是我需要的东西。但我无法弄清楚解决方案。

productcode.

<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>

Related input

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

This is the js code. I dont know this is working. This is my actual problem.

这是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>

In my Controller:

在我的控制器中:

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

I know, i messed up so much. But codes are so complicated than this. I write this code in here(shorter version). Not copy-paste. I stucked here in a while. I cant find what is the real solution is. I am open for all kinda solution.

我知道,我搞砸了很多。但是代码比这复杂得多。我在这里写这个代码(更短的版本)。不是复制粘贴。我在这里坚持了一段时间。我无法找到真正的解决方案是什么。我愿意接受各种解决方案。

Sorry for my bad english.

对不起,我的英语不好。

2 个解决方案

#1

innerHTML is a property of HTML elements, not a function of jQuery's representation.

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

Use html(content) instead, and I think it should work:

使用html(内容)代替,我认为它应该工作:

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

#2

Your selector is wrong, you forgot the '#'.

你的选择器错了,你忘记了'#'。

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

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

Also, when the event 'change' is triggered, you need to fetch the selected option.

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

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

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

You can read more about jQuery selectors here: https://api.jquery.com/category/selectors/

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

#1