Получить выбранное значение из динамического раскрывающегося списка (параметры, сгенерированные javascript для ID) - PullRequest
Новая
       8

Получить выбранное значение из динамического раскрывающегося списка (параметры, сгенерированные javascript для ID)

0 голосов
/ 18 января 2019

Я пытаюсь получить значение динамического раскрывающегося списка, выбранного пользователем (не задано заранее). Я почти уверен, что не могу использовать (пробовал также) document.getElementById("selectSubject").value;, поскольку у него конфликтующий идентификатор. Я не могу использовать 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 из раскрывающегося списка, но консоль не может распечатать его значение.

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Вы можете использовать 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>
0 голосов
/ 18 января 2019 

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/

...