I am trying to get the value of the dynamic dropdown that is selected by the user (not pre-determined). I'm pretty sure I can't use (tried as well) document.getElementById("selectSubject").value; since it has conflicting ID. I cannot use document.getElementByClass since I will be using it to add style by 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>

Additional info is that I am planning to get the value of the dropdown to be used as parameter in <input type="hidden" name ="subjectFolder" id="uploadFile"> by using document.getElementById('uploadFile').value = "value of selected option in dropdown"

Edit Update I have tried this as well but didn't work

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

** Edit** Update I have tried ravishankar chavare's method by doing this but still doesn't work.

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

** Edit** Update

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

Console only prints "Choose assigned subject" since it is the default selected but when I remove <option> Choose assigned subject </option> the default selected is one of the array values of the javascript based from the dropdown but console cannot print it's value.

I am trying to get the value of the dynamic dropdown that is selected by the user (not pre-determined). I'm pretty sure I can't use (tried as well) document.getElementById("selectSubject").value; since it has conflicting ID. I cannot use document.getElementByClass since I will be using it to add style by 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>

Additional info is that I am planning to get the value of the dropdown to be used as parameter in <input type="hidden" name ="subjectFolder" id="uploadFile"> by using document.getElementById('uploadFile').value = "value of selected option in dropdown"

Edit Update I have tried this as well but didn't work

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

** Edit** Update I have tried ravishankar chavare's method by doing this but still doesn't work.

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

** Edit** Update

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

Console only prints "Choose assigned subject" since it is the default selected but when I remove <option> Choose assigned subject </option> the default selected is one of the array values of the javascript based from the dropdown but console cannot print it's value.

• javascript
• html
• google-apps-script
• web-applications
• getelementbyid

• 2 You shouldn't give conflicting id. It should be unique – Vineesh Commented Jan 18, 2019 at 8:18
• Yup I'm pretty aware that is why I am asking for other methods to get the selected value in dropdown – newbieProgrammer5 Commented Jan 18, 2019 at 8:25

2 Answers 2

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>

Following code is working for me

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

selected_value get the value which is selected by the user

Working Jsfiddle Example Here https://jsfiddle/0yfdc51g/

You can use document.querySelector. Use document.querySelectorAll if you want to select all 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>