javascript - 使用 Javascript 将文本(从 Google 可视化查询)发送到点击时的输入字段

Question

不确定如何在标题中准确描述我的问题，但是......

我想要做的是将菜单项的 ID 或文本推送到输入字段 <input id="assignment"/>当它被点击时。每次页面加载从此 spreadsheet 提取的数据时，都会动态填充菜单。 。菜单项<a></a>在初始化以下“发送脚本”后加载。

    // Send to Input Script //
    $('#byAssignment a').click(function() {
    var id = $(this).text();
    var input = $('#assignment');
    input.val(id);});
    // End Send to Input Script //

显然这是行不通的。我该如何解决这个问题？任何帮助将不胜感激。谢谢。

完整代码如下:

// Google Visualization Query Script //
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(querymenu);

function querymenu() {
  var queryMENU = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2');
  queryMENU.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in Query: Please Refresh Page ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
	
	var datatable = response.getDataTable();
	
	
	for (var i = 1; i < datatable.getNumberOfColumns(); i++) { 
    var ddItemValue = datatable.getValue(0, i); 
	
	var ddMenuItem = document.getElementById('byAssignment').appendChild(document.createElement('A')); 
	
    ddMenuItem.href = '#';
	ddMenuItem.id = ddItemValue; 
    ddMenuItem.innerHTML = ddItemValue; 
  }
}

// END Google Visualization Query Script //

// Menu Script //
function AssignmentMenu() {
  document.getElementById('byAssignment').classList.toggle('show');
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName('dropdown-content');
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
// END Menu Script //

// Send to Input Script //
$('#byAssignment a').click(function() {
	var id = $(this).text();
    var input = $('#assignment');
    input.val(id);
});
// END Send to Input Script //

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}


.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>  

<div class="dropdown">
  <button onclick="AssignmentMenu()" class="dropbtn">Assignment</button>
  <div id="byAssignment" class="dropdown-content">
  <a>this works</a>
  </div>
</div>


<input id="assignment"/>

Answer 1

创建项目时添加事件处理程序...

var ddMenuItem = document.getElementById('byAssignment').appendChild(document.createElement('A')); 
ddMenuItem.href = '#';
ddMenuItem.id = ddItemValue; 
ddMenuItem.innerHTML = ddItemValue; 

// add event listener
$(ddMenuItem).click(function() {
  var input = $('#assignment');
  input.val($(this).text());
});

请参阅以下工作片段...

// Google Visualization Query Script //
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(querymenu);

function querymenu() {
  var queryMENU = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2');
  queryMENU.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in Query: Please Refresh Page ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
	
	var datatable = response.getDataTable();
	
	
	for (var i = 1; i < datatable.getNumberOfColumns(); i++) { 
    var ddItemValue = datatable.getValue(0, i); 
	
	var ddMenuItem = document.getElementById('byAssignment').appendChild(document.createElement('A')); 
    ddMenuItem.href = '#';
	ddMenuItem.id = ddItemValue; 
    ddMenuItem.innerHTML = ddItemValue; 
    // add event listener
    $(ddMenuItem).click(function() {
      var input = $('#assignment');
      input.val($(this).text());
    });
  }
}

// END Google Visualization Query Script //

// Menu Script //
function AssignmentMenu() {
  document.getElementById('byAssignment').classList.toggle('show');
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName('dropdown-content');
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
// END Menu Script //

// END Send to Input Script //

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}


.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>  

<div class="dropdown">
  <button onclick="AssignmentMenu()" class="dropbtn">Assignment</button>
  <div id="byAssignment" class="dropdown-content">
  <a>this works</a>
  </div>
</div>


<input id="assignment"/>