How to make option selection change button link? - javascript

I have a drop down list and a button. I want to make the selection of list reflects on the button link.
Example JSFiddle
Here is the example code:
<select style="float:left;">
<option value="5">$5.00 monthly</option>
<option value="10">$10.00 monthly</option>
<option value="15">$15.00 monthly</option>
<option value="20">$20.00 monthly</option>
</select>
<div id="button" style="width:100px;height:30px;float:left;background:#ccc;line-height:30px;text-align:center;margin:auto 5px;">
Order
</div>
What I want to achieve is when the user for example selects the second option, the button link changes to http://ordernow/10/ instead of http://ordernow/5/ and so on. Can someone inform me how do that or provide a link for a tutorial regarding this? Thank you.

Using pure javascript and adding ids to some of the elements:
JSFiddle
Here's the JavaScript:
document.getElementById("subscription").onchange = function() {
document.getElementById("order-btn").href = "http://ordernow/"+this.value+"/";
}

You can listen to select's onchange to get the new selected option's value. And then add the value to button's href:
$('select').on('change', function () {
$('#button > a').attr('href', 'http://ordernow/' + $(this).val() + '/');
});
jsfiddle DEMO

Can use a regex to parse the end of the href so path doesn't need to be known
$('select').change(function(){
var val =$(this).val();
$('#button a').attr('href', function(_,href){
var reg = /\/\d\/$/;
return href.replace(reg, '/'+val+'/');
});
});
DEMO

Related

How you can I put selected = "selected" dynamic?Jquery

I have this sample:
link
CODE HTML:
<select name="card_type" id="card_type" class="card-sel com-c select-full">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>
CODE JS:
$( document ).ready(function() {
var stateSelectValue = "Mastercard"; //this value in my site returns a dynamic type of card
console.log("primul log" + stateSelectValue);
if(stateSelectValue)
{
console.log("al doilea log" + stateSelectValue); $("#card_type").val(stateSelectValue).attr("selected","selected").trigger("change");
console.log("al treilea log" + stateSelectValue);
}
$( ".com-c" ).change(function() {
var data= $(this).val();
console.log(data);
});
});
Perhaps the example understand what they want to do.
Basically when they are receiving a value in the variable stateSelectValue to look if there is value in that list and make selected.
For example IF:
var stateSelectValue = "Mastercard";
then
<option value="mastercard" selected="selected">Mastercard</option>
and so on...
Can you help me to solve this problem please?
Thanks in advance!
First as I have already commented, you do not need to set attribute selected and trigger change function.
$("#card_type").val(stateSelectValue)
This should be enough.
Second, if you do this change, still it will not work. W
Why?:
Variable value:
var stateSelectValue = "Mastercard";
is not equal to value of option
<option value="mastercard">Mastercard</option>
Updated Codepen
You were all good just one typo mistake, your selected value was in capital i.e "Mastercard" where as in option value it was "mastercard". But in simple way doing below was enough without trigger change event.
var stateSelectValue = "mastercard";
$("#card_type").val(stateSelectValue)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select name="card_type" id="card_type" class="card-sel com-c select-full">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>
This question already asked some . please refers the below link:
JQuery setting the selected attribute on a select list
$(document).ready(function () {
$('#card_type').val("mastercard"); // Select by value
text1 = "Maestro";
$("#card_type option:contains(" + text1 + ")").attr('selected', 'selected'); // select by text
});

Automatically update select options list using jQuery or Javascript?

I have a select list that's generated by the Javascript code of my app
<select name="addToContexts" id="addToContexts">
<option selected>private</option>
<option>public</option>
<option>shared</option>
</select>
What I need to do is that when the user performs a certain action the selected parameter shifts to another option, so that the result would be something like:
<select name="addToContexts" id="addToContexts">
<option>private</option>
<option selected>public</option>
<option>shared</option>
</select>
Do you know if there's a way to do it without regenerating the whole options list simply using jQuery to get the select element by ID and to change the selected option?
Thank you!
<body>
<select name="addToContexts" id="addToContexts">
<option selected>private</option>
<option>public</option>
<option>shared</option>
</select>
<button id="changeSelect">Change</button>
<script>
$("#changeSelect").click(function(){
$("#addToContexts option:nth-child(2)").prop("selected", true);
});
</script>
</body>
Something like this?
Hope this help.
http://jsfiddle.net/6Ljn1rzr/
$('input[type=checkbox]').on(
'change',
function() {
$('option').attr("selected",false);
$('option:contains(public)').attr("selected",true);
}
);
its very simple you can visit this thread
http://www.stackoverflow.com/questions/1314245/set-the-selected-index-of-a-dropdown-using-jquery
it has explained the in a very good manner and hopefully you will get your answer from this thread
http://jsfiddle.net/washington_guedes/ovpkLexj/5/
I used an ul-li "click" event as "certain action"... and it worked well
$("li").on("click", function(){
var aux = $(this/*li*/).html();
$('#addToContexts > option')
.prop("selected", false)
.each(function(){
if( $(this/*option*/).html() === aux){
$(this/*option*/).prop("selected", true);
}
});
});

How to append text to selected item in select2?

I'm trying to edit the selected value of a select2. So I did this simple code:
http://jsfiddle.net/rcky9/2/
HTML
<select id="sel" style="width: 100%">
<option value="1">Hello</option>
<option value="2">Friends</option>
<option value="3">Stackoverflow</option>
</select>
<br><br>
<button id="addok">Add OK</button>
JS
$(document).ready(function () {
$("#sel").select2();
$("#addok").click(function() {
actual_value = $("#sel").find(':selected').text();
if (actual_value.indexOf(" OK") > -1){
return
}
newtext = actual_value + " OK";
// this works.
$("#sel").find(':selected').text(newtext);
// this does not works.
$('#s2id_sel').find('.select2-choosen').text(newtext);
});
});
As you see, after pressing the button, looks like nothing had changed, but if you open the dropdown, the OK was added successfully at the current item.
The problem appears when I try to modify the actual value located in a div with select2-choosen css class. I can't access it by this way.
Do you have any idea, advice or tip to do this?
Firing the change() on select will show the appended ok, you need to trigger change() There is no element with id s2id_sel and class .select2-choosen to last statement wont change the text.
Live Demo
$("#sel").find(':selected').text(newtext).change();

How to get the selected option in an html using jquery

I want to retrieve the id of my option that I selected. Over here you can see my HTML.
<select name="zaal" id="zaal">
<DIV CONTENTEDITABLE="FALSE" ID="MACONTAINER" MACONSTRAINT="" MAPARAMETER="ZALEN">
<DIV CONTENTEDITABLE="TRUE" ID="MAITEM">
<option value="~#ITEM.ID~" id="ZAALNAME">~ITEM.ID~, ~ITEM.NAME~</option>
</DIV>
</DIV>
</select>
I am doing it like this.
var selectVal = $("#zaal :selected").val();
var id = selectVal.substring(1);
console.log("id is: " + selectVal);
But for some reason it won't work.
Can anybody help?
EDIT
Ok the divs are the problem. But I need those to get my values from my database.So I think I need to find another solution than a select.
$("#zaal option:selected").attr('value'); // will return you ~#ITEM.ID~
To get the id
$("#zaal option:selected").attr('id'); // will return you ZAALNAME
To get id on selection change try this:
$('#zaal').on('change', function() {
// To get id
$('option:selected', this).attr('id');
$('option:selected', this).attr('value'); // return the value of selected option
// To get the select box value
var value = this.value;
});
Maybe try:
$("#zaal option:selected").val();
Also, try moving the divs outside of the select element.
Look at this question:
<div> and <select> tags
You can only put <option> or <optgroup> inside a <select>. If you want to put anything else in there you have to make some kind of list yourself.
Why would you like to put any div inside a select anyway?
If I put the HTML you gave me (with edited strings) inside Google Chome, this is what is made of your code:
<select name="zaal" id="zaal">
<option value="x" id="ZAALNAME">X, Y</option>
</select>
$("#zaal option[value='0']").text()
Try this:
var selectVal = $("#zaal option:selected").val();
var id = selectVal.substring(1);
console.log("id is: " + selectVal);
The html should be
<select name="zaal" id="zaal">
<option value="~#ITEM.ID~" id="ZAALNAME">~ITEM.ID~, ~ITEM.NAME~</option>
</select>
$('#zaal').change(function(){
alert($($(this)+':selected').attr('id'));
});
Fiddle http://jsfiddle.net/cBaZ7/1/
val() will retrieve the value of the selected option. It is not the id
So try this:
$("#zaal option:selected").attr("id")

Select box to change url

I want to use a select to change the query on the end of a url to change it's sort options. e.g:
<select id="sort">
<option value="?order_by=date">Recent</option>
<option value="?order_by=random">Popular</option>
<option value="?order_by=random">Random</option>
<option value="">Staff Picks</option>
</select>
so for example by default a list of posts will be shown by date and then if a user chooses an option it will reload the page with the query string on the end of the URL. If possible looking to use jQuery to achieve this. Thanks.
Attach a handler to the change event for the select box that adds the value of the selected option to the current window location with everything after the ? snipped off:
$('#sort').change(function(e){
var locAppend = $(this).find('option:selected').val(),
locSnip = window.location.href.split('?')[0];
window.location.href = locSnip + locAppend;
});
Here's an example ࢐ (it doesn't redirect, but you get the idea...)
To have the appropriate value selected on page load, you can run the following function before you bind the change handler:
function selectCurSort() {
var match = window.location.href.split('?')[1];
$('#sort').find('option[value$="'+match+'"]').attr('selected',true);
}
selectCurSort();
I'm not quite sure why you aren't just using something like:
<form method="GET">
<input type="hidden" name="query" value="..." />
<select id="sort" name="order_by">
<option value="date">Recent</option>
<option value="popular">Popular</option>
<option value="random">Random</option>
<option value="staff">Staff Picks</option>
</select>
<input type="submit" value="Sort" />
</form>
And, for the JS, if any, just:
$('#sort').change(function() {
$(this).parents('form').submit();
});
Then, you don't require anyone to have JavaScript enabled.
Like this?
$("#sort").change(function(){
window.location = $(this).find("option:selected").val();
});
Add
onchange="if (this.value && /^\?/.test(this.value)) location = location.path + this.value"
to your <select>.
You might want to put a blank option at the top too.
$(function() {
$("#sort").change(function() {
var myVal = $(this).val();
window.location = "www.mywebsite.com/"+ myVal;
});
var qs = window.location.pathname;
$("#sort option").each(function() {
if(qs.contains($(this).val()))
$(this).addAttr("selected","selected");
});
});
Try that.

Categories

Resources