We Keep Coding

Select dropdown option redirecting on clicking on button [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I had created a sample drop down list, below is the code.
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
</select>
<button>GO</button>
After selecting the dropdown item and clicking on GO button i want to redirect the page to respective sites like, https://www.amazon.in/ ,https://www.flipkart.com/ and https://www.snapdeal.com/ respectively.
Kindly help me how can i do this

I hope below code helps you,
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="http://www.amazon.com">Amazon</option>
<option value="http://www.flipkart.com">Flipkart</option>
<option value="http://www.snapdeal.com">Snapdeal</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var selectbox = document.getElementById("select-id");
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}
</script>

You can try the following way:
var linkArr = ["https://www.amazon.in/","https://www.flipkart.com/","https://www.snapdeal.com/"];
var selectedPosition = 0;
document.getElementById('select-id').addEventListener('change', function(){
selectedPosition = this.selectedIndex;
});
document.getElementById('go').addEventListener('click', function(){
if(selectedPosition != 0)
window.location.href = linkArr[selectedPosition-1];
});
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
</select>
<button type="button" id="go">GO</button>

<select id="selectid">
<option j-link="" value="" selected="">Pick a E-commerce</option>
<option j-link="http://amazon.com" value="">Amazon</option>
<option j-link="http://flipkart.com" value="">Flipkart</option>
<option j-link="http://snapdeal.com" value="">Snapdeal</option>
</select>
<button id="buttonid">GO</button>
<script>
document.getElementById("buttonid").onclick = function () {
var select = document.getElementById("selectid");
var option = select.children[select.selectedIndex];
if (!option || !option.getAttribute("j-link") || !option.getAttribute("j-link").length)
return;
window.location = option.getAttribute("j-link");
};
</script>

// handle click
$("#go").on("click", function(){
//get selected option value
var option = $('#select-id').find('option:selected').attr('value');
console.log(option)
//redirect to that link
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = option;
var win = window.open(URL, "_blank", strWindowFeatures);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-id" name="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="https://www.amazon.in/">Amazon</option>
<option value="http://flipkart.com">Flipkart</option>
<option value="http://snapdeal.com">Snapdeal</option>
</select>
<button id="go">Go</button>

if you are ok to use jquery :
<select id="select-id" name="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="https://www.amazon.in/">Amazon</option>
<option value="http://flipkart.com">Flipkart</option>
<option value="http://snapdeal.com">Snapdeal</option>
</select>
<script>
$("#select-id").on("change", function(){
location.href = this.value;
})
</script>

How to perform click for a drop down in angular2 [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have the following drop down and I am unable to perform click on select of one of the option.
<select >
<option value="volvo">Volvo</option>
<option value="saab" (click)="get()">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
get() {
alert('hi');
}

You can use (change) event .
<select (change)="onchange(event)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
onchange(event) {
if(event.target.value=="saab")
{
//perform your action
}
}

You should have the change for the select , not for the option,
<select [(ngModel)] = "selected" (change)="onchange(event)">
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
DEMO

Jquery Multiple Select Show values in <li> [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I would like to display the value of all my select fields in a list (li).
Here is my HTML code.
<select name="is_format" id="is_format">
<option value="A4">{l s='A4'}</option>
<option value="A3">{l s='A3'}</option>
</select>
<select name="is_color" id="is_color">
<option value="Couleur" selected>{l s='Couleur'}</option>
<option value="Noir/Blanc">{l s='Noir et Blanc'}</option>
</select>
Thank you

Try it like,
var ul = $('<ul>').appendTo('body');
function createList() {
ul.empty();
$('select option:selected').each(function() {
li = $('<li/>').text($(this).text()).attr('value', this.value);
li.appendTo(ul);
});
}
$('select').on('change', function() {
createList()
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="is_format" id="is_format">
<option value="A4">{l s='A4'}</option>
<option value="A3">{l s='A3'}</option>
</select>
<select name="is_color" id="is_color">
<option value="Couleur" selected>{l s='Couleur'}</option>
<option value="Noir/Blanc">{l s='Noir et Blanc'}</option>
</select>

if statement not executed in javascript [always else] [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
pls can any one help.it always return else..what i want is, when select 1st dropdown,the second dropdown hide and Vice Versa
html
<form id="myform" onchange="check();" >
<select id="myselecta" >
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb" >
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
java script
function check() {
var dropdown = document.getElementById('myform').value;
if (dropdown == 'myselecta') {
document.getElementById('myselectb').style.display = 'none';
}
else {
document.getElementById('myselecta').style.display = 'none';
}
}

Do you want to accomplish something like this?
HTML
<select id="switch" onchange="check();">
<option value="myselecta">myselecta</option>
<option value="myselectb">myselectb</option>
</select>
<select id="myselecta">
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb">
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
JS
function check() {
var dropdown = document.getElementById('switch').value;
if (dropdown === 'myselecta') {
document.getElementById('myselecta').style.display = 'block';
document.getElementById('myselectb').style.display = 'none';
} else {
document.getElementById('myselecta').style.display = 'none';
document.getElementById('myselectb').style.display = 'block';
}
}
Edit
html
<select id="myselecta" onclick="check()">
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb" onclick="check()">
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
javascript
function check() {
if (this.id === 'myselecta') {
document.getElementById('myselectb').style.display = 'none';
} else {
document.getElementById('myselecta').style.display = 'none';
}
}

Try changing
var dropdown=document.getElementById('myform').value;
to
var dropdown=document.getElementById('myform').getAttribute('id');

As far as I know, onchange event doesn't capture individual select's onchange events. You should better add an onchange to each individual select element and pass a parameter to the function, like the element's ID to differentiate which element fired the event.

I do have one dynamic dropdownlist and textbox addition [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a DropDownList and Textbox on my page.
The DropDownList bringing data from database dynamically.
I want that when I choose any item from dropdownlist, it should appear inside the textbox immediately.
How to do it???

here is a solution... by using javascript
<select id="select" onchange="return getValue();">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<input type="text" name="textbox" id="textbox">
<script type="text/javascript">
function getValue()
{
var e = document.getElementById("select");
var str = e.options[e.selectedIndex].value;
document.getElementById("textbox").value = str;
}
</script>

The Jquery way
HTML CODE:
<select id="select" name="ddlb">
<option value="1" selected='selected'>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<input type="text" name="textbox" id="txt">
JQUERY CODE:
$('#select').on('change', function () {
$('#txt').val($('#select option:selected').val());
});
$('#txt').val($('#select option:selected').val());
LIVE DEMO:
http://jsfiddle.net/PfBFS/2/
Happy Coding :)