Develop Reference

Setting dropdown values in Javascript

I have a dropdown with following HTML.
<select name="custom_123" id="custom_123_123" class="custom form-control form-control-full form-select searchable abcd-done" style="display: none;">
<option value="" selected="selected">None</option>
<option value="1">Alaska</option>
<option value="2">Newyork</option>
</select>
<div id="custom_123_123_abcd" class="abcd-container abcd-container-single abcd-container-
active" style="width: 100%"><a href="javascript:void(0)" class="abcd-single"
tabindex="-1"><span>Alaska</span></a>
</div>
I want to be able to select Newyork in the dropdown. For that, I am during the following.
var dropdown_id = document.querySelector('[id^="custom_123"]').id;
var dropdown_abcd = dropdown_id + 'abcd';
document.getElementById(dropdown_abcd).getElementsByClassName("abcd-single")[0].innerHTML = "Alaska";
But the same doesn't get applied. Can anyone help?

Here is an example based on your code:
const select = document.querySelector('[id^="custom_123"]');
select.value = 'Alaska';
Update on comment
If there are listeners on the select, here is an example on how to fire a change event.
const select = document.querySelector('[id^="custom_123"]');
select.value = 'Alaska';
select.dispatchEvent(new CustomEvent('change'));

How to send a value from a select to an input text in html using javascript?

I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.

<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz

You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>

one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.

You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.

what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}

JS function with two arguments, referencing different objects

I'm pretty much brand new to JS, and working on a small web page to teach myself a little bit. I feel like this would have been answered before, but I don't know how to word it better to find it.. sorry!
basically, I have two templates set up in HTML, for two select boxes, which will be re-used quite a few times across the form. then I have a function that is called Onchange for select 1, and will change what is visible in select 2, I managed to reference select 1 with (this), but I'm completely at a loss as to how to reference the second one.
function myFunction(selectObject)
{
if (selectObject.value == 'option1')
{
//code to reference Select2 here
option3.disabled = true;
option3.style.display = "none";
}
}
<template id="Select1">
<select name="Select1" onchange="myFunction(this)">
<option value="option">option</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</template>
<template id="Select2">
<select name="Select2" >
<option value="option3">option</option>
<option value="option4">option1</option>
<option value="option5">option2</option>
</select>
</template>
thanks for any help!

Something like this? I am not sure why are you using template tags.
function myFunction()
{
var select1 = document.querySelector("#Select1>select");
var select2 = document.querySelector("#Select2>select");
var option3Visible = select1.value != 'option1';
var option3 = select2.querySelector("option[value='option3']");
option3.disabled = !option3Visible;
option3.style.display = option3Visible ? "inline" : "none";
}
<div id="Select1">
<select name="Select1" onchange="myFunction()">
<option value="option0">option0</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</div>
<div id="Select2">
<select name="Select2" >
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</div>

Basically you need to get familiar with events, dom query API and possibly CSS selectors.
If you're using templates, you need to search inside content property of the corresponding template:
let t1 = document.querySelector('#Select1');
let t2 = document.querySelector('#Select2');
// there are many ways how to select an element, here simple element selector is used
let select1 = t1.content.querySelector('select');
let select2 = t2.content.querySelector('select');
let option3 = t1.content.querySelector('[value=option3]');
// add event listener is preferred to your `onchange` attribute binding
select1.addEventListener('change', function() {
// modify select2 here
option3.disabled = true;
option3.style.display = "none";
});

How to get selected value from select tag using javascript and go to another page using that value

I have a select tag where it contains some values, as shown below:
<select id="menu" SIZE=6 onChange="go()">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Now i am using below script for this, where it get the selected value from the drop down,
<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
// here i need to make a specific link using this selected drop down value
}
</script>
I just need to know how can i make use of this selected value and go to specific link like
window.location.href='getCityDetails.jsp?c=sv'; // this is not working properly
Can anyone suggest me best solution for this.

<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
window.location.href='getCityDetails.jsp?c=' + sv;
}
</script>
Hope it helps you

HTML :
<select id="menu" SIZE=6 onChange="go(this.value)">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Javascript :
function go(desination){
if (destination != ''){
window.location.href='getCityDetails.jsp?c=' + desination;
}
}

you need to concatenate the string properly. try this:
window.location.href='getCityDetails.jsp?c=' + sv;

-- You can use--
var TaskType = document.form1.SelTaskType.value;
-- TaskType will display selected option from below
<select id="SelTaskType" name="SelTaskType" >
<option selected>-- select --</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

how to fetch value from <select> tag

I have a list like
<select name="operation" id="operation">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>
I have to get value "XXXX" if user select an option 1, for 2nd I have to get show "YYYY" and so on. And format should be like in the above means i don't have to change value="1","2","3". I need it in javascript.
Thanks

You can get it by grabbing the <select> then getting the <option> at the .selectedIndex, like this:
var sel = document.getElementById('operation');
var text = sel.options[sel.selectedIndex].text;
You can test it out here.

var dropdown = document.getElementById('operation');
var selected = dropdown[dropdown.selectedIndex].text;
probably also check for selectedIndex not being out of bounds

Try this to alert selected option's text :
<select name="operation" id="operation"
onchange="alert(this.options[this.selectedIndex].text);">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>