单独选择标签选项并获取PHP输入中的值

时间:2019-02-12 17:52:44

标签: javascript php html html5

怎么样,我有一个<select>标记,其中充满了BD。 我想做的是,在选择所需选项时,将<select>值分配给不同的<input>标签。

当前,我选择了一些选项,我得到了选项的值和文本。我想将它们作为2个不同的选项。

在我的示例中,我有这个<select>

<option value = "1"> Pizza1 Pizza2 </ option>

我的问题是如何分隔选项的文本,以使Pizza 1在一个选项中而Pizza2在另一个选项中。

这样的事情: enter image description here

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <form action="#">

    <select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">

      <option value="1">Pizza1 Pizza2</option>
      <option value="2">Hamburger1 Hamburger2</option>
      <option value="3">Bacon1 Bacon2</option>

    </select>

    <br/>

    <input type="text" name="food" id="food" value="" />

    <br/>

    <input type="text" name="food2" id="food2" value="" />

    </form

  </body>
  </html>
  <script type="text/javascript">
  var showValue = function(x){
    document.getElementById('food').value=x;
  }



  var showValue2 = function(x){
    document.getElementById('food2').value=x;
  }
  </script>

2 个答案:

答案 0 :(得分:0)

只需将它们放在不同的选项值中,如下所示:

Start

答案 1 :(得分:0)

我希望我明白你的意思。要使它们具有不同的选项,只需将它们放入不同的选项标签中,如下所示:

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
      <form action="#">
    <select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">

      <option value="1">Pizza1</option>
      <option value="2">Pizza2</option>
      <option value="3">Hamburger1 Hamburger2</option>
      <option value="4">Bacon1 Bacon2</option>

    </select>

    <br/>

    <input type="text" name="food" id="food" value="" />

    <br/>

    <input type="text" name="food2" id="food2" value="" />

    </form

  </body>
  </html>
  <script type="text/javascript">
  var showValue = function(x){
    document.getElementById('food').value=x;
  }



  var showValue2 = function(x){
    document.getElementById('food2').value=x;
  }
  </script>