Develop Reference

Open link based on combination of selected option and button clicked (html, javascript)

I am posting this question because there are Q&A s with the first part of my question (dropdown options), but I am not sure how to incorporate the 2nd part (buttons). The scenario is this:
My page has an html dropdown with options:
Option1 Option2 Option3 Option4 Option5
There are also various buttons:
ButtonA ButtonB ButtonC ButtonD ButtonE
I'd like to send the user to the corresponding page for the Button/Option.
So for example, if the user picks Option 2 and then clicks Button D, I'd like for Button D to open up the ButtonD-Option2 page.
The user could also then click ButtonB, in which case, if the Option has not been changed, I would open the ButtonB-Option2 page.
Or the user could change to Option 3 and click Button D again, and it would open the ButtonD-Option3 page.
So I am back to this, I've tried various things and here is what I have so far:
<select id="LineDropdown" onchange="ChangeLineFunc()">
<option selected value = "000"> Select ... </option>
<option value = "002">002</option>
<option value = "003">003</option>
<option value = "004">004</option>
etc ...
The buttons are just a list:
<ul>
<li> <input type=button class="button" value = "Button1" onclick="OpenButton1()"/></li>
<li> <input type=button class="button" value = "Button2" onclick="OpenButton2()"/> </li>
... etc
I can see what they select:
function ChangeLineFunc(){
var LineSelected = document.getElementById( "LineDropdown" );
var LineSelectedValue = LineSelected.options[LineDropdown.selectedIndex].value
// alert( LineSelected.options[LineDropdown.selectedIndex ].value )
alert (LineSelectedValue)
}
and I can open a hardcoded page:
function OpenButton1() {
location.href("https...Button1/Option2.pdf")
}
What I would really like to do is open |
location.href("https ... Button1/*selectedoption*.pdf
I'd like to stick with the function per Button for now as it is (for me) easier to understand.

Please share your code too, when you post a question next time. Check this fiddle, it might do it for you. Here's the js part of it.
var combinations = [
{option:1, button:'a', link:'www.google.com'},
{option:1, button:'b', link:'www.ustraa.com'},
{option:2, button:'a', link:'www.ustraa.com'},
{option:2, button:'b', link:'www.google.com'},
];
window.handleClick = function(button) {
var option = $('#select-box').val();
combinations.forEach(function(c) {
if (c.option == option && c.button == button) {
console.log(c.link);
//window.location = c.link;
}
});
}

Detect on change event in hidden select option which is itself changed via javascript

I have built a dropdown which is styled and uses an unordered list.
Items from an array are populated to the select dropdown and the ul dropdown.
The user selects an item and it gets updated into a target span, as well as in being selected in the option.
However as this is all done via js, it is not able to actually fire the on change event for the select (as far as I can tell).
Is there someway to bind it to my other function?
Here is the html:
<div class="selectWrapper">
<select id="townResult" class="dropdown" name="townSelect">
<option disabled="" selected="" value="0">SELECT AN AREA</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<span class="selected">Selected option</span>
<ul class="townList"></ul>
</div>
JS/jQuery:
var popUkTowns = "[ FEATHERSTONE TOWN, ABARDARE, ABBEYDLE, ABBEYMEAD, ABBEYTOWN, ABBOTS LANGLEY, ABEDEEN, ABERAERON, ABERAMAN, ABERBARGOED, ABERCARN, ABERCHIRDER, ABERCYNON, ABERDARE, ABERDEEN, ABERDEENSHIRE, ABERDOUR, ABERDOVEY, ABERFAN, ABERFELDY, ABERFIELDY, ABERFOYLE, ABERGAVENNY, ABERGELE, ABERGELE CLWYD, ABERLOUR, ABERSOCH, ABERTILLERY, ABERTRIDWR, ABERYSTWTH, ABERYSTWYTH, ABINGDON, ABOYNE, ABRIDGE, ABROATH, ACCRINGTON, ACHARACLE, ACKLAM, ACKWORTH]";
popUkTowns = popUkTowns.split("[ ").join(",").split("]").join('"').split(",");
var townList = $('.townList');
var townResult = $('#townResult');
for(var i=0;i<popUkTowns.length;i++){
townList.append('<li>' + popUkTowns[i] + '</li>');
//townResult.append('<option value="' +popUkTowns[i]+ '">' +popUkTowns[i]+ '</option');
}
selectOption = function(){
var trigger = $('.selected');
trigger.on('click',function(){
$(this).parent().toggleClass('open');
return false;
});
var selectLI = townList.find('li');
selectLI.on('click',function(){
var thisLI = $(this).text();
townResult.empty();
townResult.append('<option value="' +thisLI+ '" selected="selected">' +thisLI+ '</option>');
trigger.html(thisLI);
var selectWrapper = $('.selectWrapper');
selectWrapper.removeClass('open');
});
}();
townResult.on('change',function(){
console.log('Value changed'); // this doesn't work of course
});
I have a working js fiddle here. Normally the select would be hidden, but for the purposes of this exercise I am displaying it in the fiddle to prove that the value is being updated in the select option.
I have tried to bind an on change event to the option as well as binding the selectOption function, but I cannot seem to trigger it, but there might be a better way to do this (ie when the .selected span has been updated).

You have to trigger the change event manually in the click event. Programatically changes are not going to trigger it automatically.
townResult.trigger("change");
Working example.

HTML JS How to display text about a dropdown list item

I have a programm where I want to have a dropdown list called DropDownGamer which i've made:
<select disabled="disabled" id="DropDownGamer">
<option disabled selected value>Valige Youtuber</option>
<option value="Terminats">Terminats</option>
<option value="HDTanel">HDTanel</option>
<option value="DeniedNetwork">DeniedNetwork</option>
<option value="Shroud">Shroud</option>
</select>
Now I have a checkbox that enables the dropdown list so you can choose from it. I want to make something like this: If you choose one of the items from the dropdown list, lets say you choose Terminats - the first item in the list, And press a button called ShowInfo, I want there to show up text below the button, about that item, something like this: Terminats has xxx subs and xxx views. I want to have custom text for each item.
I thought about something like this:
<input id="Button1" onclick="showInfo()" type="button" value="Show Info." />
function showInfo()
{
if (document.getElementById("Terminats"))
{
}
else if (document.getElementById("HDTanel"))
{
}
}
But I dont think that would work or atleast, I can't seem to get it to work.
Thanks!

one option would be to use a switch statement:
function showInfo() {
var selectElement = document.getElementById("DropDownGamer");
switch (selectElement.value) {
case 'Terminants':
// code to display text for terminants
break;
case 'HDTanel':
// code to display text for hdtanel
break;
etc...
}
}
best option would be to create an element after your button, let's say
<p id="description"></p>
and then something like
var description = document.getElementById('description');
description.removeChild(description.childNodes[0]);
var descriptionText = document.createTextNode("your description");
description.appendChild(descriptionText);
inside the respective case statement (you first target your element, then empty it if there is text inside, then create new text node and append it).
so full code would be:
var description = document.getElementById('description'),
selectElement = document.getElementById('DropDownGamer');
function showInfo() {
switch (selectElement.value) {
case 'Terminants':
description.removeChild(description.childNodes[0]);
var descriptionText = document.createTextNode("your description for terminants");
description.appendChild(descriptionText);
break;
case 'HDTanel':
description.removeChild(description.childNodes[0]);
var descriptionText = document.createTextNode("your description for hdtanel");
description.appendChild(descriptionText);
break;
etc...
}
}

I would put data attributes on each select item, and then use the function to grab that data. You could put subs and views right on the selected item with data- attributes like this
<option selected value="Valige Youtuber" data-subs="2" data-views="23">Valige Youtuber</option>
Then in your showInfo() function you could grab the select list, and find the datavalue
function showInfo() {
var dropdown = document.getElementById('DropDownGamer');
var dataset = dropdown[dropdown.selectedIndex].dataset;
var subs = dataset.subs;
var views = dataset.views;
}
Or even put the whole custom string into a data attribute like this
<option selected value="Valige Youtuber" data-customString="my custom statement">Valige Youtuber</option>

How to get attribute value in textbox when an item is selected in drop down box?

NOTE: This question may look duplicate but I haven't found what I'm looking for.
I'm trying to get an attribute value from the selected dropdown item, and write it into a text box when the dropdown is changed/updated.
HTML code:
<select id="dropdown" onchange="ChooseContact()">
<option value='1' cal='One'>1</option>
<option value='2' cal='Two'>2</option></select>
<input id="abc" type="text">
Javascript code:
function ChooseContact() {
var y=document.getElementById("dropdown").options[select.selectedIndex].getAttribute("cal");
document.getElementById("abc").value = y;
}
Check live here https://jsfiddle.net/KEY9y/1095/

If you look in browser dev tools console you will see the error select is undefined
Then look in the function can see you are using it but it has never been declared
Try
function ChooseContact() {
var select = document.getElementById("dropdown"); // declare "select"
var y = select.options[select.selectedIndex].getAttribute("cal");
document.getElementById("abc").value = y;
}
DEMO

Javascript changing select box selected value not working properly

I am using javascript to programmatically add options to an html select box. When I add a new option, I am setting that option's .selected property to true so that it is the one that appears in the select box. When I do this, the innerHTML does not change to the new value, but when I click in the select box, I see the option I wanted selected has a checkmark next to it, indicating it is selected. Why isn't the value shown the correct value?
Here is my function that populates the select box options:
function printCartList(newCart){
// Check if newCart is null
newCart = newCart ? newCart : "a_new_cart_was_not_provided_12345abcde";
// set carts object from cookie if it exists, otherwise create a new one
if($.cookie("carts") != null){
carts = JSON.parse($.cookie("carts"));
}
else{
selectOption = new Object();
selectOption.value = "newuniquecartid12345abcde";
selectOption.html = "***New Cart***";
carts = new Object();
carts.size = 1;
carts.option = new Array();
carts.option[0] = selectOption;
}
// Get the select element
var select = document.getElementById("select_cart");
// Get the length of the select options list
var length = select.options.length;
// Remove all items from the select box
while(select.options.length > 0){
select.remove(0);
}
// If newCart was provided, create a new option and add it to the cart
if(newCart != "a_new_cart_was_not_provided_12345abcde"){
selectOption = new Object();
selectOption.value = newCart;
selectOption.html = newCart;
carts.option[carts.size] = selectOption;
carts.size++;
}
// Save the cart in a cookie
$.cookie("carts",JSON.stringify(carts));
// Add the options to the select box
for(var i = 0; i < carts.size; i++){
var opt = document.createElement('option');
opt.value = carts.option[i].value;
opt.innerHTML = carts.option[i].html;
if($.cookie("activeCart") == carts.option[i].value){
// Set the option to true if the cart is the active cart.
//*****I have tested this with an alert box showing the value of carts.option[i].value This is being called for the correct option*******
opt.selected = true;
}
select.appendChild(opt);
}
}
The new item is being added to the select box, and does have a checkmark next to it when viewing all the items in the select box, it just doesn't show the correct value in the select box.
Here is my html:
<form method="POST" name="cartSelectForm" action="home.php">
<select name="cartList" id="select_cart" data-mini="true" onchange="submitCartForm()" data-icon="false">
<option value="newuniquecartid1234567890">*** New Cart ***</option>
</select>
</form>
edit
I have discovered that jquery css is interfering with javascript filling the innerHTML of the select box. I am linking in: "http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css". Is there anyway to get around the jquery? I can't just remove the jquery css. That would break everything on my site, and I don't have time to redo it all.
Here is a jsfiddle of the problem: http://jsfiddle.net/RjXRB/1/

It's better to use angular way when creating select box - look here: http://docs.angularjs.org/api/ng.directive:select
<select ng-model="color" ng-options="c.name group by c.shade for c in colors">
</select>
If you have a reason to use the innerHtml approach, you should consider using Scope.apply or Scope.$digest as described in the docs.