单击按钮后如何在输入文本中输入选项值？

Question

我不熟悉 javascript 和 jQuery，我在问你。 我想选择产品的代码，一旦我从select 下拉列表中选择了它，我点击按钮，它应该在我创建的输入框文本中添加值，这样我也可以积累更多产品的更多代码。 请记住，单击按钮后，不再无限期添加相同的值，但可以选择另一个代码并将其添加到输入文本中已存在的代码旁边。

我不知道使用<input type = "submit"> 标记而不是button 标记来发送或在这种情况下将选定的文本从select 传输到文本表单是否更实用。

如果你能用 javascript 或 jQuery 为我完成这个动作，你会救我的命 :)

<select class="select" id="select-code">
    <option value="">Select a code</option>
    <option value="value1">Code 1</option>
    <option value="value2">Code 2</option>
    <option value="value3">Code 3</option>
    <option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input name="my-quote" type="text" placeholder="code1,code2...">

Answer 1

function myFunction() {

  var newText = document.getElementById('select-code').value
  var input = document.getElementById('my-quote')

  if (input.value == '') input.value = newText
  else input.value = input.value + ', ' + newText
  
}

<select class="select" id="select-code" onchange='myFunction()'>
  <option value="">Select a code</option>
  <option value="Code 1">Code 1</option>
  <option value="Code 2">Code 2</option>
  <option value="Code 3">Code 3</option>
  <option value="Code 4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id="my-quote" type="text" placeholder="code1,code2...">

Answer 2

这其实很简单，可以作为初学者练习，所以我将简要介绍一下我将如何解决它：

1. 注册按钮 onClick 事件
2. 读取选定值
3. 将其添加到占位符属性中

这样的东西（根本没有测试过）

//button click event
$("#code-btn").click(function (event) {
                //in element #select-code
var textToAdd = $('#select-code')
    //find element with pseudo selector :selected
    .find(":selected")
        //get its inner text
        .text();

//check if input already contains the text here, if not
if (!$("input").attr("placeholder").includes(textToAdd)) {

    //into input element
    $("input")
        //into attribute placehoder
        .attr("placeholder",
            //insert original text         //insert colon     //insert new text
            $("input").attr("placeholder") + ", " +           textToAdd)
    }
});

Answer 3

这不是对您问题的直接回答，而是另一种解决方案。如果可能的话，我会考虑使用<select multiple>：带有“multiple”属性的选择标签。这是一个原生 HTML 功能，允许用户从列表中选择多个选项。我不知道您是如何提交表单数据的，但如果使用 <form> 标记，那么表单的数据将包含已选择的值。

Tutorial about select multiple

<label for="select-code">Select a code</label>
<select class="select" id="select-code" multiple>
    <option value="value1">Code 1</option>
    <option value="value2">Code 2</option>
    <option value="value3">Code 3</option>
    <option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id='input' name="my-quote" type="text" placeholder="code1,code2...">

Answer 4

首先，你似乎是个完全的初学者。所以你应该学习DOM api来学习如何操作窗口。

无论如何，这里有你想要的代码；

document.getElementById('code-btn').onclick = () => {
let e = document.getElementById('select-code');
document.getElementById('input').value =  e.options[e.selectedIndex].text;
}

<select class="select" id="select-code">
    <option value="">Select a code</option>
    <option value="value1">Code 1</option>
    <option value="value2">Code 2</option>
    <option value="value3">Code 3</option>
    <option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id='input' name="my-quote" type="text" placeholder="code1,code2...">

document.getElementById('code-btn') 获取 id 为“code-btn”的元素。由于那是一个按钮，我们可以使用onclick 属性，它将接受一个函数，当它被点击时，该函数将被调用。

在该函数中，我只是获取输入字段并将其值设置为下拉列表中所选选项的文本。

我认为这里的代码是自记录的。