i have two drop downs, below is the code, my second dropdown is dependent to my first dropdown, so when i selected from first dropdown it will show options in second dropdown based on what i selected in the first. and then when i select an option from my second dropdown it will call a php page. but whats happening right now is when i select an option from my first dropdown, the page just refreshed and not giving option to select from second dropdown.
<tr>
<td align="center"><select name="Ticket" id="Ticket">
<option value="" selected="selected">Please Select...</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select></td>
<tr>
<td align="center"><select name="Category" size="1" id="Category">
<option value="" selected="selected">--</option>
<option value="Select1.php" class="Option1">Select1</option>
<option value="Select2.php" class="Option2">Select2</option>
</select><input type="submit" value="Go" id="submit"/></td>
</tr>
and here is my js code so that second dropdown would call the php page,
UPDATE: i've updated the jquery and page is not refreshing when i select from my first dropdown but whats happening now is its trying to redirect the page already as soon as i selected from first dropdown...i want that to happen on my second dropdown and not on the first...
$(function() {
$("#submit").hide();
$("#form1 select").change(function() {
window.location = $("#form1 select option:selected").val();
})
});
This should do the trick. The page will only redirect when you click the 'Go' button.
$(function () {
$('#Ticket').change(function() {
var optionClass = $(this).val();
$('#Category option:not(:first)').hide();
if (optionClass) {
$('#Category').find('.' + optionClass).show();
}
});
$('#submit').click(function () {
window.location = $("#Category").val();
});
});
If you want to redirect as soon as the second selectlist option is selected, replace the $('#submit').click.... with
$(function() {
$('#Ticket').change(function() {
var optionClass = $(this).val();
$('#Category option:not(:first)').hide();
if (optionClass) {
$('#Category').find('.' + optionClass).show();
}
});
$('#Category').change(function() {
var url = $(this).val();
if (url) {
window.location = url;
}
});
});
Change
$("#form1 select").change(function() {
window.location = $("#form1 select option:selected").val();
})
to
$("#Category").change(function() {
window.location = $(this).val();
})
Related
I have a select picker element like this in my web page :
<select id="difficulty" name="difficulty" class="selectpicker" multiple onchange="ChangeFilters()">
<option value="-1" selected >All</option>
<option value="0" >Facile</option>
<option value="1" >Normal</option>
<option value="2" >Difficile</option>
</select>
I want that when the user select the "All" options (value = '-1') , if there are other options selected they become not selected, and if the option all is selected when the user select an other options the "all option" become not selected.
I have searched for like 2 hours and i can't make this working.
I work with bootstrap and this select element is a selectpicker element, my javascript don't work when i try something ..
Please help !
EDIT :
I posted the working code as an answer, thanks for your help !
Something like this?
function ChangeFilters(){
var selVal = $('#difficulty').val()[0];
if(selVal == -1){
$('#difficulty').attr('multiple',false);
}else{
$('#difficulty').attr('multiple',true);
}
}
With the help of this post Select all / Unselect all in Bootstrap Select plugin
This is the full working code which allow the user to select the All option, 3 difficulties, or nothing :
HTML :
<select id="difficulty" name="difficulty" class="selectpicker" multiple onchange="ChangeFilters()">
<option value="All" selected >Tous</option>
<option value="0" >Facile</option>
<option value="1" >Normal</option>
<option value="2" >Difficile</option>
</select>
Javascript :
//This need to be on your page load or other load event before the first onChange.
$('#difficulty').data('allOptionIsSelected', true);
function ChangeFilters() {
if ($('#difficulty') != null) {
if ($('#difficulty').val() != null) {
var allOptionIsSelected = ($('#difficulty').val() || []).indexOf("All") > -1;
function valuesOf(elements) {
return $.map(elements, function (element) {
return element.value;
});
}
if ($('#difficulty').data('allOptionIsSelected') != allOptionIsSelected) {
//User clicked 'All' option
if (allOptionIsSelected) {
$('#difficulty').selectpicker('val', ["All"]);
$('#difficulty').selectpicker('refresh');
} else {
}
} else {
// User clicked other option
if ($('#difficulty').val().length != $('#difficulty').find('option').length) {
//user clicked other
// All options were selected, user deselected one option
// => unselect 'All' option
$('#difficulty').selectpicker('val', valuesOf($('#difficulty').find('option:selected[value!=All]')));
allOptionIsSelected = false;
}
}
$('#difficulty').data('allOptionIsSelected', allOptionIsSelected);
}
$('#difficulty').selectpicker('refresh');
}
}
If you want to make this work with your project, change '#difficulty' to the id of your select control.
Thanks to #yuriy636 for the previous help :)
Hello i would like to update the drop down text with the selected option text after page redirect and drop down reloaded.
Here is my code
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
<option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price (Low-
High)
</option>
<option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price (High
Low)
</option>
</select>
</div>
when i select any option from this drop down it loads the page and open that link which is there in the value section of that option.
after every time the page loads i see only recommanded items option text not the one which i selected from the drop down. Like if i select Name (Z-A) it should update to the Name (Z-A) in the dropdown after page load.
I have tried this code so far but its not giving me the expected result
$(document).ready(function () {
$('#selectdropdown').change(function () {
location.href = $(this).val();
$("#selectdropdown option:selected").text();
});
});
You can use selected attribute in options in <select>.
Put name attribute in select, and when you are submitting a form, fetch the same after page load, and place a condition so select the item.
<if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif>
Like :
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select" name= "selectdropdown">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME" <if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif> >Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
</select>
</div>
Put the same for all the options.
You can follow these steps.
Pass the selected value in the url.
When the page loads you can check those values from URL to make the value auto selected.
$(document).ready(function() {
$("#social").change(function(event) {
var target_url = $(this).val();
//pass the target url in the url scope
var redirect_url = target_url + "?social=" + target_url;
location.href = redirect_url;
});
//on page load get the url values to select it from dropdown.
var urlvars = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
var keys = urlvars[0].split('=');
var default_select = keys[1];
$('#social').val(default_select);
});
<form>
<select id="social">
<option value="http://localhost/index.cfm">Default</option>
<option value="http://localhost/a.cfm">Google</option>
<option value="http://localhost/b.cfm">Facebook</option>
</select>
</form>
You can check url parameter for sort1desc and assign the value to select box. Here is jquery code.
$(document).ready(function () {
var sortParam = getUrlParameter("sort1desc");
alert(sortParam);
$('#selectdropdown option').each(function() {
var str = $(this).attr('value');
if(str.indexOf("sort1desc="+sortParam) >= 0) {
$('#selectdropdown').val($(this).attr('value'));
}
});
$('#selectdropdown').change(function () {
location.href = $(this).val();
$("#selectdropdown option:selected").text();
});
});
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
You could use localStorage.getItem() and localStorage.setItem(); to save the selected value and then reselect the value in your ready-function.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage
$(document).ready(function() {
var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
if (opt) opt.selected = true;
$('#selectdropdown').change(function() {
localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
location.href = $(this).val(); //instant redirect
//$( "#selectdropdown option:selected" ).text(); <-- not possible because js is already about to redirecting
});
});
Working example (without jquery):
<select id="selectdropdown" onchange="changed(this)">
<option>nothing</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
<script>
var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
if (opt) {
opt.selected = true;
}
function changed(dd) {
localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
window.location = location.href;
}
</script>
i have around 15 row in a table, each row comprises of a dropdown menu. Here is the code of my dropdown
<td headers="Vehicles">
<select id = "Dropdown">
<%if (ViewData.Model.Details.ElementAt(i).vehicle == "Car")%>
<%{%>
<option value="car" selected="selected">car</option>
<option value="Bus">Bus</option>
<option value="Lorry">Lorry</option>
<%} %>
<%else if (ViewData.Model.Details.ElementAt(i).vehicle == "Bus")%>
<%{%>
<option value="car" >car</option>
<option value="Bus" selected="selected">Bus</option>
<option value="Lorry">Lorry</option>
<%} %>
<%else if (ViewData.Model.Details.ElementAt(i).vehicle == "Lorry")%>
<%{%>
<option value="car">car</option>
<option value="Bus">Bus</option>
<option value="Lorry" selected="selected">Lorry</option>
<%} %>
</select>
</td>
Now if i click on 4th row, i need what is the option value selected in 4th row.
When i click on 3rd column of a row, i m reading 1st column text. Like this i need to read the option selected in the row.
$('#Requests td:nth-child(3)').bind('click', function () {
var id = $(this).parents('tr:first').find('td:eq(0)').text();
});
you can do like this:
$('#Requests td:nth-child(3)').bind('click', function () {
var id = $(this).parents('tr:first').find('td:eq(0)').text();
var selected = $(this).parents('tr:first').find('td:eq(0)').find('select#Dropdown').val();
});
you should be using on as it is recommended:
$('#Requests td:nth-child(3)').on('click', function () {
var id = $(this).parents('tr:first').find('td:eq(0)').text();
var selected = $(this).parents('tr:first').find('td:eq(0)').find('select#Dropdown').val();
});
Try this:
$('#Requests td').on('click', function () {
var id = '';
var ddVal = $(this).closest('tr').find('select :selected').val();
if($(this).index() === 2){
var id = $(this).closest('tr').find('td:eq(0)').text();
}
console.log(id);
console.log(ddVal);
});
And there in your code i assume you are not applying same ids for multiple select dropdown element. If this is the case then i would say that is not a valid HTML markup you have to give different ids to the select elements or you can change the id attribute to class.
First of all you cannot use same id for select tag in multiple places, so change it to class like
class="Dropdown"
You need to find selected value in dropdown like below code
$("#tableId tr").click(function() {
var selectedOption = $(this).find(".Dropdown").val();
alert(selectedOption );
});
This can be obtained by simply assigning a class to your dropdown menu
See the jsfiddle
http://jsfiddle.net/3bgQ9/1/
$(function(){
$(".sel").change(function(){
alert($(this).val());
});
});
I would like to use jquery to change a particular value in the query string by doing a find and replace of that value based on what is selected from a dropdown option on the page. For example:
Let's say we have the following query string on the current page: ?field1=value1&field2=value2&archived=yes
With the dropdown options being:
Non-Archived
Archived
if someone selects "Non-Archived" the jquery function should do a find and replace on the current query string and set archived=yes to archived=no and then refresh the page.
Here's some code that I have now but it doesn't do a find and replace, it just takes what value I select from the dropdown and then changes the page based on the option value set in the drop down html.
<script type="text/javascript" src="/js/jQuery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#dropdown").change(function(e){
window.location.href = jQuery("#dropdown").val();
});});
</script>
<select class="dropdown" id="dropdown">
<option value="#" selected="selected">Choose Type</option>
<option value="(set archived=no)">Non-Archived</option>
<option value="(set archived=yes)">Archived</option>
</select>
Any help would be greatly appreciated!
Try this
jQuery
jQuery(document).ready(function () {
jQuery("#dropdown").change(function (e) {
if (window.location.href.indexOf("archived") > -1) {
window.location.href.replace(/(archived=yes|archived=no)/g, "archived=" + jQuery("#dropdown ").val());
} else {
window.location.href += "archived=" + jQuery("#dropdown ").val();
}
});
});
HTML
<select class="dropdown" id="dropdown">
<option value="#" selected="selected">Choose Type</option>
<option value="no">Non-Archived</option>
<option value="yes">Archived</option>
</select>
This seems to work:
JSFiddle Demo
var href="?field1=value1&field2=value2&archived=yes";
var testUrl = $(location).attr('href');
alert('Current URL = ' + testUrl);
jQuery("#dropdown").change(function(e){
if($("#dropdown").val() == "(set archived=no)") {
href = href.replace("archived=yes", "archived=no");
} else if($("#dropdown").val() == "(set archived=yes)") {
href = href.replace("archived=no", "archived=yes");
}
alert(href);
window.location.href = href;
});
So, this is what I am trying to do.. I want a dropdown in HTML with a submit button that changes based on the value of the dropdown.
So, when I have this:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>
What I need is a button that checks what the value is. If value = 20x30 then use URL www.example.com/20x30
If value is 30x30 then use URL www.example.com/30x30
I am far from a PHP expert, so anyone that is able to set me off in the right direction would be a life saver :)
some simple Javascript would suffice:
<form id="FORM_ID" action="DEFAULT_ACTION">
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
</form>
<script type="text/javascript">
document.getElementById('select13').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>
You might try this:
Javascript:
function goto() {
window.location = "http://www.example.com/"+document.getElementById('select13').value;
}
HTML:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>
When you click on the 'GO' button it redirects to example.com/(the selected value).
Here's a JSFiddle with an exmaple.
EDIT to fit your comment:
function goto() {
var selection = document.getElementById('select13').value;
if (selection != 'All') {
//window.location = "http://www.example.com/"+selection;
alert("http://www.example.com/" + selection);
} else {
alert("Error: You must pick something");
}
}
Also, if you want to submit a form and then do the redirection. The PHP code would be as follows:
<?php
//Process your form without echoing anything before the header function.
if($_REQUEST['sizes'] != 'All'){
header('location:http://example.com/'.$_REQUEST['sizes']);
}
else{
header('location:http://example.com/form.php');
}
You'll need an onchange event for your dropdown:
document.getElementById("select13").onchange = function() {
var currentVal = this.value;
if (currentVal == "20x30") {
//do stuff
}
}