JavaScript - output value from dropdown menu more than once? - javascript

I'm in the middle of the process to create a very simple tool that allows my group to select a conference place. I'm getting some issues and hope I can receive some suggestions and help from you.
I have a dropdown menu, it allows user to select the conference location and it will display in text. For example:
HTML
<select onchange="changed('list_1')" id="list_1" class="travel" />
<option selected disabled>Select Place</option>
<option value="New York">New York</option>
<option value="Pennsylvania"> Pennsylvania</option>
<option value="Boston">Boston</option>
<option value="Washigton DC">Washigton DC</option>
</select>
JavaScript
function changed(listId) {
var list = document.getElementById(listId);
document.getElementById("val_"+listId).innerHTML = list.value;
}
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value;
Below is the output I am looking for:
You select New York as the conference location. Please make sure you confirm with supervisor before you attend the conference in New York.
When selecting "New York", the value is successfully displayed between You select "Value" as the conference location. Unfortunately because document.getElementById can only be used once, so I'm unable to get the same value "New York" to output in the second sentence.
I was wondering if any of you can show me an example or give me some ideas of how I can select the value only once from dropdown but the value will display in multiple areas?
Any help would be greatly appreciated


You don't have a limit of using the value of an element, here is a simple solution to your problem :
Use a simple template for the text you want to display :
var textTemplate = 'You select {CITY} as the conference location. Please make sure you confirm with supervisor before you attend the conference in {CITY}.';
function changed(list_id){
var cityName = document.getElementById(list_id).value;
document.getElementById('outputTest').innerHTML = textTemplate.split('{CITY}').join(cityName);
}
this suppose you have an html code like :
<select onchange="changed('list_1')" id="list_1" class="travel" />
<option selected disabled>Select Place</option>
<option value="New York">New York</option>
<option value="Pennsylvania"> Pennsylvania</option>
<option value="Boston">Boston</option>
<option value="Washigton DC">Washigton DC</option>
</select>
<p id="outputTest"></p>


Well, first off you are mistaken about only being able to use document.getElementById once, there is no such restrictions and I have no idea why you would think there was.
That said, the way to get the value and then use it more than once is to store it in a variable.


Fix the opening tag so it is not self closing. Also change the onchange function to take this as an argument, referring to itself.
<select onchange="changed(this)" id="list_1" class="travel">
Rewrite the changed function to include any select as a parameter. You may refer to the value of the select element with its value property. This property is reusable as many times as you desire. Store it in a variable if you prefer. Example:
function changed(select) {
console.log('Visiting ' + select.value + '? Enjoy your trip to ' + select.value + '.');
}
<select onchange="changed(this)" id="list_1" class="travel" >
<option selected disabled>Select Place</option>
<option value="New York">New York</option>
<option value="Pennsylvania"> Pennsylvania</option>
<option value="Boston">Boston</option>
<option value="Washigton DC">Washigton DC</option>
</select>

Related

Change span text with selected option

I am on beginning of the coding life. I am trying to change text in span with selected option, but it gives me values not texts. For example, when I select the bus option, I want it to shows me the "bus" text. I do not want value number. Thanks in advance.
<select id="vehicles" onchange="showChange()">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(){
var selected_vehicle = document.getElementById("vehicles").value;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>

You can first pass this keyword to the function then get the text using selectedIndex of option.
<select id="vehicles" onchange="showChange(this)">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(el){
var selected_vehicle = el.options[el.selectedIndex].text;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>

If you keep the inline declarations from your HTML ( generally the preferred approach ) you can assign your event handlers in a separate file. Also, as a point of note - if you submit the form data in the traditional manner ( rather than with AJAX etc ) then the select element needs a name - an ID will NOT appear in the REQUEST array!
document.querySelector('select[name="vehicles"]').addEventListener('change',e=>{
e.target.nextElementSibling.textContent=[ e.target.value, e.target.options[e.target.options.selectedIndex].text].join(' ')
})
<select name='vehicles'>
<option selected hidden disabled>Select mode of transport
<option value='1'>Bus
<option value='2'>Car
<option value='3'>Plane
</select>
<span id='vehicle'></span>

Change "value" of combobox option JS

So, as the title says I want to change the value of a certain option using JS. I have already looked for it but every answer refers to changing the selected option not the value of a specifical option.
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
I want to change "Ver" option value from 0 to 1. I don´t know if it is possible but thanks in advance.

Have you tried assigning it an id and then changing it in your js file?
Something like this:
<option value='0' id='opt1' selected>Ver</option>
and in javascript:
document.getElementById("opt1").value = "1";

You can select the option with value 0 using
let opt = document.querySelector('select.form-control option[value="0"]')
You can then change the value by reassigning it
opt.setAttribute('value', '1')
If you have more than one select with class form-control this could be a problem, and you might want to give it/them a unique id — then the selector would be
let opt = document.querySelector('select#your-id option[value="0"]')
Here is a stack snippet doing this, where I've combined the select and the assignment into a single statement. I've also added a change event listener to show the value in the console, so if you switch to 20 then switch to Ver again it would print 20 and then 1 to the console, showing you that the value is indeed 1, not 0
document.querySelector('select.form-control')
.addEventListener('change', function(e) {
console.log(this.value);
});
document.querySelector('select.form-control option[value="0"]')
.setAttribute('value', '1');
select {
min-width: 10em;
}
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>

Hello you can assign the value with the following instruction
$("#SelectID").val("value option");
document.getElementById("SelectID").value = "value option";
reference in this url Set value of combobox or select

Get a select box by name and set another select box by same name?

I am building a fairly complex form-- I need to copy some data between one and another and I am using jQuery to do this. The only road block I am running into is setting the state.
I have two drop downs, one us using the full state name as the value and the other is using the state abbreviation as the value. The names are the same-
so on form 1 it looks like
<option value="Illinois">Illinois</option>
and form 2 it looks like
<option value="IL">Illinois</option>
Each form has its own unique css selector. How can I set the selected value of form 2 to match what is in form 1 using jQuery?
I do not have any control over the forms, just need to manipulate the input. Have tried using a name selector in jQuery, but I'm not having any luck.
Thank you.

You can do something like this
<select id="fullName">
<option value="Maryland" data-abbr="MD">Maryland</option>
<option value="Illinois" data-abbr="IL">Illinois</option>
<option value="Delaware" data-abbr="DE">Delaware</option>
</select>
<select id="abbr">
<option value="MD">Maryland</option>
<option value="IL">Illinois</option>
<option value="DE">Delaware</option>
</select>
And your jQuery
$('body').on('change', '#fullName', function(){
var abbr = $(this).find('option:selected').data('abbr');
$('#abbr').val(abbr);
});

Try this
<form id="form1" name="form1">
<select name="states" onchange="changeselect(this)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</form>
<form id="form2" name="form2">
<select name="states">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
</select>
</form>
function changeselect(elem)
{
var value1 = $(elem).val();
$('#form2 select option').removeAttr('selected');
$('#form2').find('select option').each(function(){
var value2 = $(this).html();
if(value1 == value2)
{
var selected = $(this).attr('value');
$('#form2 select').val(selected);
}
});
}

If you create 2 arrays which exactly correspond with one another:
var StateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
var StateAbbreviations = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];
You can:
get the value from the first option list;
find that value's index in the first array; (hint: use indexOf)
use the same index to find out what the corresponding abbreviation is in the second array;
use the returned abbreviation to locate the correct option in the second option list

How to keep the selected value after selecting from options?

I'm quite new at AngularJS programming, just a few weeks with it and I would like to understand why, in the select box I use, when reloading the page or switching between pages and returning to this one, the option selected does not stay as the main option to be shown, and the option <option value="" selected>No assignat</option> is the one that always stays there?
<select ng-model="selected" ng-options="poblacio.title for poblacio in poblacions" ng-change="canviarPoblacio(selected)">
<option value="" selected>No assignat</option>
</select>
-CONTROLLER
.controller('ConfigCtrl', function($scope, noms, fPoblacions){
$scope.poblacions = fPoblacions.getPoblacionsConfig();
$scope.selected = localStorage.getItem('nomPobleConfig');
$scope.canviarPoblacio = function(objPobla){
localStorage.setItem('nomPobleConfig', objPobla.title);
localStorage.setItem('idPobleConfig', objPobla.id);
window.location.reload();
}
})
$scope.poblacions receives a list of names from a factory and the name that the user selects is storaged at the localstorage and would have to remain selected in the Select box, I hope you can help me :)
Excuse me if my english's not good at all, thanks for your future answers and I hope I find in them what I have not by searching and researching here in stackoverflow and everywhere..
-EDITED
I would like to add that, when I run it to see how it works, that's what appears in the Chrome console:
<select class="selectBox ng-pristine ng-untouched ng-valid" ng-model="selected" ng-options="poblacio.title for poblacio in poblacions" ng-change="canviarPoblacio(selected)">
<option value="" selected="selected">No assignat</option>
<option value="object:9" label="name1">name1</option>
<option value="object:10" label="name2">name2</option>
<option value="object:11" label="name3">name3</option>
<option value="object:12" label="name4">name4</option>
<option value="object:13" label="name5">name5</option>
<option value="object:14" label="name6">name6</option>
<option value="object:15" label="name7">name7</option>
<option value="object:16" label="name8">name8</option>
<option value="object:17" label="name9">name9</option>
<option value="object:18" label="name10">name10</option>
<option value="object:19" label="name11">name11</option>
<option value="object:20" label="name11">name11</option>
<option value="object:21" label="name12">nam12</option>
<option value="object:22" label="name13">name13</option>
<option value="object:23" label="name14">name14</option>
<option value="object:24" label="name15">name15</option>
</select>
I mean, the values assigned automatically are object:xx, and I suppose that it would be better to be the id's of every name, which in the factory are 1,2,3,4,5... respectively, same ID as the nameXX number.. if this can be solved too, it would be good :)

Since you are using ng-model='selected' You have to initialize $scope.selected like:
$scope.selected = localStorage.getItem('nomPobleConfig');

When you set $scope.selected, you are only setting it to the "title", not the actual selected object.
localStorage.setItem('nomPobleConfig', objPobla.title);
You'll need to set the full object into localStorage like this:
localStorage.setItem('nomPobleConfig', objPobla);

HTML Reset form including select element with selected='selected'

I have a table page with html filters in a form at the top. When the form is submitted, the selected filters are applied to the SQL query, and the filters all gain selected='selected' on the value that was selected. I want a reset button that resets these to the first value of the selection, not that specified in the incoming code.
Does that make sense?
For example, if the HTML was :
<select name='minTV'>
<option value=0>Min TV 0</option>
<option value=1000>Min TV 1000</option>
<option value=1100>Min TV 1100</option>
<option value=1200>Min TV 1200</option>
<option value=1300 selected='selected'>Min TV 1300</option>
<option value=1400>Min TV 1400</option>
<option value=1500>Min TV 1500</option>
<option value=1600>Min TV 1600</option>
<option value=1700>Min TV 1700</option>
</select>
Now, when I hit the reset button, I want the first value, value=0, to be the selected one, not value=1300, as happens by default. I need to do this over several select boxes.
Any ideas? As simple as possible please.
No jQuery, but Prototype is fine.
EDIT, in response to answer #1:
I can't seem to get this one to work; my select is :
<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 >Premiership East</option>
</select>
My reset button is:
<button type="reset" value="Reset" onclick="return resetAll();">Reset</button>
And my javascript function is:
function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
}
Any ideas?

You can give an id to your select tag for example id="selectbox" Then you can change the selected value with the following Javascript code:
document.getElementById('selectbox').selectedIndex = 0;
Note that you have to enter the number of the option, so for example for value=1000 you would enter selectedIndex = 1;
function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
};
<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 selected>Premiership East</option>
</select>
<button type="reset" value="Reset" onclick="return resetAll();">Reset</button>
see on JSFiddle.net

document.getElementById('divSelect').selectedIndex = -1;

Categories

Resources