Question

我有一个表单，其中包含一个使用数据列表的输入字段，我想要做的是从该字段中选择某些内容，使用所选内容更新另一个输入字段，这是我到目前为止所拥有的

                <div class='form-row'>
                    <div class='col-xs-12 form-group required'>
                        <h2><label class='control-label'>Product code</label></h2>
                        <input id="ItemSelect" type=text list=jobs style='font-size:21px;height: 40px;'
                               class='form-control'
                               name="Code">
                        <datalist id=jobs>
                            <?php
                            foreach ($this->Products as $a) {
                                echo '<option value=' . $a["Code"] . '>' . $a["Code"] . " - " . $a["Name"] . ' </option>';
                            }
                            ?>
                        </datalist>
                    </div>

                    <div class='col-xs-12 form-group required'>
                        <input id="Placeholder" readonly class='form-control'
                               placeholder="Prodcut Descirption">
                    </div>

                    <script>
                        $("#ItemSelect")
                            .change(function () {
                                var str = "";
                                $("datalist option:selected").each(function () {
                                    str += $(this).text() + " ";
                                });
                                $("#Placeholder").attr("placeholder", str).val("").focus().blur();
                            })
                            .change();

                    </script>

这种工作，它选择正确的输入字段来检测变化，但它没有把值放入。如果我改变

$("datalist option:selected")

到

$("select option:selected")

它确实将所有其他选择字段的值放在那里吗？

Answer 1

在数据专家中没有input这样的东西。

您可以通过查看$("#ItemSelect").change(function() { var str = $(this).val() + " "; $("#Placeholder").attr("placeholder", str).val("").focus().blur(); });中当前的内容来获取所选值：

$("#ItemSelect").change(function() {
    var str = $(this).val() + " ";.

    $('datalist option').each(function() {
        if($(this).text() === str) {
            $("#Placeholder").attr("placeholder", str).val("").focus().blur();
        }
    }); 
});

如果您只想在输入值实际存在于数据列表中时执行此操作：

var objectHTMLCollection = document.getElementsByTagName('pre');
var str = [].map.call( objectHTMLCollection, function(node){
    return node.textContent || node.innerText || "";
  }).join("");
alert (str);

Answer 2

<datalist id=jobs>

should change datalist tag to select tag

<select id=jobs>

once you change that the below statement will work

$("select option:selected")

在html输入字段中更改Placeholder属性

2 个答案: