Question

我正在尝试获取用户选择的动态下拉列表的值（未预先确定）。我很确定我不能使用（也尝试过）document.getElementById("selectSubject").value;，因为它具有冲突的ID。我无法使用document.getElementByClass，因为我将使用它来通过CSS添加样式。

<script> //to generate the dynamic dropdown that is working
var select = document.getElementById("selectSubject");
if (arrayEmail[i] == email){
var opt = arraySubject[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
<script>


<select id="selectSubject"> //where the dynamic dropdown is show
<option>Choose assigned subject</option>
</select>

  //additional info that may contribute to the problem
 <form>
<input type="hidden" name ="subjectFolder" id="uploadFile">
  <input type="file" name="imageFile">
  <input type="button" value="Upload File" onclick="google.script.run.withSuccessHandler().upload(this.parentNode)">
</form>

其他信息是，我计划通过<input type="hidden" name ="subjectFolder" id="uploadFile">将下拉列表的值用作using document.getElementById('uploadFile').value = "value of selected option in dropdown"中的参数

编辑更新，我也尝试过此操作，但是没有用

var subjects = document.getElementsByTagName("select").getElementById('selectSubject').value;
document.getElementById('uploadFile').value = subjects;

**编辑** 更新我通过这样做尝试了ravishankar chavare的方法，但仍然无法正常工作。

 var e = document.getElementById("selectSubject");
 var selected_value = e.options[e.selectedIndex].value;
 document.getElementById('uploadFile').value = selected_value;

**编辑** 更新

 var e = document.getElementById("selectSubject");
 var selected_value = e.options[e.selectedIndex].value;
 document.getElementById('uploadFile').value = selected_value;
 console.log(selected_value);

控制台仅打印“选择分配的主题”，因为它是默认选择，但是当我删除<option> Choose assigned subject </option>时，默认选择是基于下拉列表的javascript数组值之一，但是控制台无法打印它的值。 / p>

Answer 1

var select = document.getElementById("selectSubject");
var opt = 'youreemailvalue';
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);

function SetSelectedValue() {
var e = document.getElementById("selectSubject");
 var selected_value = e.options[e.selectedIndex].value;
 document.getElementById('uploadFile').value = selected_value;
 alert('value set to uploadfile')
}

<select id="selectSubject" onchange="SetSelectedValue();"> 
<option>Choose assigned subject</option>
</select>

 <form>
<input type="hidden" name ="subjectFolder" id="uploadFile">
  <input type="file" name="imageFile">
  <input type="button" value="Upload File" onclick="google.script.run.withSuccessHandler().upload(this.parentNode)">
</form>

以下代码对我有用

var e = document.getElementById("selectSubject");
var selected_value= e.options[e.selectedIndex].value;

selected_value 获取用户选择的值

此处工作的Jsfiddle示例 https://jsfiddle.net/0yfdc51g/

Answer 2

您可以使用document.querySelector。如果要选择所有document.querySelectorAll

，请使用select#selectSubject

console.log( document.querySelector( 'select[id=selectSubject]' ) );
console.log( document.querySelectorAll( 'select[id=selectSubject]' ) );

<div id="selectSubject"></div>

<select id="selectSubject" class="select"></select>
<select id="selectSubject"></select>

从动态下拉列表中获取选定的值（由javascript生成的ID的选项）

2 个答案: