I have this 'select' dropdown list on the website:
<select id="customQuestion0" class="form-control maxCharLimit" data-bind="'css':{'inputError': verificationFailed}, 'attr':{'id':'customQuestion' + $index(), tabindex:tabIdx},hasFocus:isSelected, options: answers, optionsText:'answer', optionsCaption:$parent.chooseOneText, value:selectedAnswer, optionsValue:'answerKey'" id="customQuestion0" tabindex="13">
<option value="">Choose One...</option>
<option value="253133968">Doulos Email / Website</option>
<option value="253133969">Cadence Email/Website</option>
<option value="253133970">A colleague / friend</option>
<option value="253133971">Other professional network (eg LinkedIn, Twitter)</option>
</select>
In the Tampermonkey script I can select e.g. option Duolos Email / Website with:
var formCustomQuestion1 = document.getElementById('customQuestion0')
formCustomQuestion0.value = '253133968'
But unfortunately this value 253133968 can change. Is there any way to be able to simply select item #1 in the script (starting the numbering at 0), disregarding the value?
It is working simply with:
formCustomQuestion0.selectedIndex = '1'
Related
I have this select element with multiple option inside it:
<select class="form-control" name="genere1">
<option value="Alternative / Indie">Alternative / Indie</option>
<option value="Classical Music">Classical Music</option>
<option value="Country">Country</option>
<option value="Easy Listening">Easy Listening</option>
<option value="Electronic / Dance">Electronic / Dance</option>
<option value="Hip Hop / Rap">Hip Hop / Rap</option>
<option value="Jazz">Jazz</option>
<option value="Latin / Reggaeton">Latin / Reggaeton</option>
<option value="Other">Other</option>
<option value="Pop">Pop</option>
<option value="Reggae / Dancehall">Reggae / Dancehall</option>
<option value="Rock">Rock</option>
<option value="Spiritual">Spiritual</option>
</select>
for every option element you see up here i have another select element. Basically, I have a series of music genres listed in a select element and, under it, the subgenres related to every single one of the "master genres".
What I would like to do is make the subgenres visible only when the relative genre is selected. For example, if the user selects "Pop", I would like to show them the related select field containing the Pop subgenres.
My HTML markup is actually generated by a WordPress plugin and I am not able to edit it, unfortunately. This being said, I can't declare custom values inside my HTML because they are automatically generated by the plugin. I am actually looking for a simple solution, something like: if 'master genre' is 'rock', then display 'rock' input subgenres. How could I do something like this?
You could link two selects and display corresponding subgenres using .dataset.option. I'm afraid you won't get around a little JavaScript here.
Here's a working example for your particular use-case:
const genre = document.querySelector("#genre");
const subgenre = document.querySelector("#subgenre");
const subOptions = subgenre.querySelectorAll("option");
const setValue = (newValue) => {
subgenre.innerText = null;
for (let i = 0; i < subOptions.length; i++)
subOptions[i].dataset.option === newValue &&
subgenre.appendChild(subOptions[i]);
};
setValue(genre.value);
<select id="genre" onchange="setValue(this.value)">
<option value="Metal">Metal</option>
<option value="Rock">Rock</option>
</select>
<select id="subgenre">
<option value="Metal" data-option="Metal">Thrash Metal</option>
<option value="Metal" data-option="Metal">Death Metal</option>
<option value="Metal" data-option="Metal">Black Metal</option>
<option value="Rock" data-option="Rock">Classic Rock</option>
<option value="Rock" data-option="Rock">Hard Rock</option>
</select>
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>
I am making a bookings page for a movie theater. I would like the user to be able to choose days in which movies are showing and then based off the day, the sessions that are available.
For example, the first drop-down menu displays movies currently showing. if someone wants to see Pixels, then the second drop down menu displays the days Pixels is showing. Once the user selects a day, then the third drop down menu will provide the times that Pixels is showing on that particular day.
<label>Movie Name:
<select id="movie" name="movie">
<option selected="selected" value="">Please select a movie</option>
<option value="Pixels">Pixels</option>
<option value="Straight_Outta_Compton">Straight Outta Compton</option>
<option value="Last_Cab_To_Darwin">Last Cab To Darwin</option>
<option value="Nicki_and_The_Flash">Nicki and The Flash</option>
</option>
</select>
</label>
</br>
<label>Session Day:
<select id="day" name="day">
<option selected="selected" value="">Please select...</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
</label>
</br>
<label>Session Time:
<select id="time" name="time">
<option selected="selected" value="">Please select...</option>
<option value="1200">12:00</option>
<option value="1300">13:00</option>
<option value="1500">15:00</option>
<option value="1800">18:00</option>
<option value="2100">21:00</option>
</select>
</label>
Lets say Pixels shows on Mondays and Tuesdays and the only times it shows is at 13:00 and 18:00. How would i write the jQuery to provide this sort of functionality?
A quick exemple on how you can handle this :
JS
$("#movie").on("change", function(){
$("#day option, #time option").hide();
var days = $("option:selected", this).attr("data-days").split(",");
var times = $("option:selected", this).attr("data-times").split(",");
for(i=0; i<days.length; i++){
$("#day option[value="+days[i]+"]").show();
}
for(i=0; i<times.length; i++){
$("#time option[value="+times[i]+"]").show();
}
});
CSS
#day option, #time option{
display:none;
}
You have to store all informations about each movie in data-days and data-times attribute.
This way, once selected, you can retrieve all this informations, split them, and display corresponding <option>
Be carreful, you have a useless </option> tag at the end of your "#movie" <select></select>
Live Demo
Edit 1:
From your comment, the solution I can provide could look like this exemple
First, store all info in a data- attribute, like day1[time1,time2];day2[time1,time2] and so one.
After some split() & substring() on #movie .change() event, you can dynamically add specific options for the #day select tag (which will now look like <option value="Monday" data-times="13:00,18:00">Monday</option>).
Same as before, just make a function that will handle the data-times on #day .change() event to dynamically create the desired #time 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);
Have a form field asking for a product, these are various sizes, the second form field asks for the quantity.
The stock quantity of each product is shown in the first select, I want the second select to be a maximum of the stock available so customers cannot order more than I have available.
This is the first select (also linked to show custom pictures) Site is ASP
<select name="barcode" id="imageselect">
<option value>Please Select .....</option>
<option value="322974">6.6lbs 100m - £21.00 ( 2 in stock )</option>
<option value="322975">8.2lbs 100m - £21.00 ( 3 in stock )</option>
<option value="322976"disabled=disabled>10.4lbs 100m - £21.00 - Out of stock</option>
<option value="323656">13.7lbs 100ms - £21.00 ( 4 in stock )</option>
</select>
This is the second select:
<select name="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Have tried using onchange event but with no joy.
The UK Autotrader has a very good example of this working with their car makes / models.
This should do what you want...
NB: I've used a shot cut by adding a 'stock' attribute to your options, just to avoid parsing the string.
<option value="322974">6.6lbs 100m - £21.00 ( 2 in stock )</option>
If you want to avoid this, the example below also shows you how to get the text to parse for the stock attribute.
$("#imageselect").change(function(event){
var $this = $(this),
value = $this.val();
var $option = $("option[value="+value+"]", $this),
text = $option.text(), // you could parse this to get stock OR
stock = parseInt($option.attr('stock')); // short-cut: use stock attr
// only show the first n options:
var $opts = $("select[name=quantity] option");
$opts.hide().slice(0, stock).show();
});
The second select will show the maximum stock. So what you need to do is store the values in the database, fetch max value and as you are using asp , call the page with ajax which will be shown here as a select option