Question

我想从一个列表框中获取选项，然后单击按钮，我希望将该选项转移到另一个列表框中。我尝试了以下方法：

首先是JS，

第二HTML

//Selector
function Selector(){
    var e = document.getElementById("modelss");
    var strUser = e.options[e.selectedIndex].text;
}
//Onclick transfer
var button1=document.getElementById("push");
function PushToTable(){
  var content = document.getElementById("transfer").text = strUser;
  button1.onclick=PushToTable();
};

<div class="column" style="background-color:#ccc;">
  <h2>Selected model</h2>
  <select id="selectedmodelss" size="10" style="width: 200px;">
    <option id="transfer"></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
  </select>
</div>
<div class="column" style="background-color:#ddd;">
  <h2>Models</h2>
  <select id="modelss" onchange="selector(this);" size="10" style="width: 200px;">
    <option value="1">something</option>
    <option value="2">1</option>
    <option>txt</option>
    <option>tttt</option>
    <option>ttt</option>
  </select> 
</div>

<button onclick="PushToTable()" id="push">Push</button>

有人可以帮我吗？

Answer 1

您的方法不错，但是有一些问题：

全局定义strUser，以便每个函数都可以访问它
通过HTML将onclick属性分配给按钮。您想在PushToTable()中执行此操作，而该操作永远不会被调用，因此按钮将永远不会“获取”该属性
您错过了用于推送内容的按钮

PS：并不是真正的问题，但是您不需要将this传递给Selector()

var strUser;
//Selector
function Selector() {
  var e = document.getElementById("modelss");
  strUser = e.options[e.selectedIndex].text;
}
//Onclick transfer
var button1 = document.getElementById("push");

function PushToTable() {
  var content = document.getElementById("transfer").text = strUser;
};

<div class="column" style="background-color:#ccc;">
  <h2>Selected model</h2>
  <select id="selectedmodelss" size="10" style="width: 200px;">
    <option id="transfer"></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
  </select>
</div>
<div class="column" style="background-color:#ddd;">
  <h2>Models</h2>
  <select id="modelss" onchange="Selector();" size="10" style="width: 200px;">
    <option value="1">something</option>
    <option value="2">1</option>
    <option>txt</option>
    <option>tttt</option>
    <option>ttt</option>
  </select>
  <button id="push" onclick="PushToTable()">Push</button>
</div>

Answer 2

用selector()拼写错误的Selector()
定义全局变量strUser

var id, strUser;
//Selector
function Selector() {
  var e = document.getElementById("modelss");
  strUser = e.options[e.selectedIndex].text;
  id = e.options[e.selectedIndex].value;
}
//Onclick transfer

function PushToTable() {
  var option = '<option id="'+id+'">'+strUser+'</option>';
  $('#selectedmodelss').append(option);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column" style="background-color:#ccc;">
  <h2>Selected model</h2>
  <select id="selectedmodelss" style="width: 200px;" size="5">
  </select>
</div>
<div class="column" style="background-color:#ddd;">
  <h2>Models</h2>
    <select id="modelss" onchange="Selector(this);" style="width: 200px;" size="5">
    <option value="1">something</option>
    <option value="2">1</option>
    <option>txt</option>
    <option>tttt</option>
    <option>ttt</option>
  </select> 
</div>

<button onclick="PushToTable()" id="push">Push</button>

JS | HTML从一个列表框中获取选定的文本，单击按钮将该文本设置为第二个列表框

2 个答案: