How to pass selected value in dropdown and append in site_url? - javascript

How do you get the selected value in dropdown and append it into the site_url? I cant figure out how to do this. Please point me in the right diretion. Thank you.
<form name="filterByDate" method="post">
<h3>Filter Suggestion</h3>
<select name="year">
<option value="2013">2013</option>
<option value="2014">2014</option></select>
<ul>
<li>Jan</li>
<li>Feb</li>
</ul>
</form>
I edited the accepted answer below: here is the edited portion:
var linksContainer=document.getElementById("linksContainer");
linksContainer.innerHTML="<li>January

Try to use the code below: (have slightly changed it)
<html>
<body>
<form name="filterByDate" method="post">
<h3>Filter Suggestion</h3>
<select name="year" onchange="generateLinks(this);">
<option value="2013">2013</option>
<option value="2014">2014</option></select>
<!-- <ul>
<li>Jan</li>
<li>Feb</li>
</ul> -->
<ul id="linksContainer">
</ul>
</form>
<script type="text/javascript">
function generateLinks(obj){
var selval=obj[obj.selectedIndex].value;
var linksContainer=document.getElementById("linksContainer");
linksContainer.innerHTML="<li>Jan</li>";
}
</script>
</body>
</html>

Ill use jQuery then, however id improve on the markup to have classes/IDs for the tags i wanted to target.
Give the select a class/id and use it in the script and the UL and or the link that is to be targeted.
function saveUrl($item, url ) {
$item.attr('data-url', url);
}
// save all the links original href
$('ul a').each(function() {
saveUrl( $(this), $(this).attr('href') );
});
// on change make the links go to the actual year
$('.select-year').on('change', function() {
var $link = $('ul a'),
linkDataUrl = $link.attr('data-url'),
selectedOption = $(this).val(),
newUrl = linkDataUrl + selectedOption;
$link.attr('href', newUrl);
});

The below will give you the selected text value in dropdown
$("#yourdropdownid option:selected").text();
and below will give the selected index
$("#yourdropdownid ").val()
you can pass the index or text to the anchor to pass url and call a onclick event method
please refer below sample code
Jan
js
document.getElementById('myAnchor').onclick = function() {
// this is the <a> in here
window.location.replace("Pass the value from Dropdown from above methods");
return false; // optional, prevents href from executing at all
};

Related

Use anchors in "Select" drop down list

Alright, so I have a currently functioning drop down list that displays a hidden div of content on the same page when that items is selected from the dropdown. The problem is I need to be able to have this same code as an anchor or something that will allow me to call up that particular section either when referencing that page from another page or by simply navigating back to the page after having moved forward in the content.
Here is the script:
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
</script>
And my page content:
<div id="mental_lever_collection">
<div class="menu"><span class="title">Choose a Mental Lever Collection</span>
<select id="category_select" class="select">
<option value="#option1">Mental Levers & Leveraged Thinking</option>
<option value="#option2">Zero Aggression Basics</option>
</select></div>
<div id="option1" class="box">
Some Content
</div>
<div id="option2" class="box">
Some Content
</div>
</div>
If you have any ideas on how to tweak this to get the desired effect it would be greatly appreciated.
Fiddle Demo
Try this
$(document).ready( function() {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
var test = $(this).val();
console.log(test);
$(test).show();
});
});
There is an extra '#' in your code.
Please change $('#'+$(this).val()).show(); to $($(this).val()).show();
Hope this help you to solve the problem :
Full jquery code
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$($(this).val()).show();
});
});
</script>

Append div or span to a dropdown list

I would like to "attach" a div to a dropdown list. Is that possible?
I require something like this:
To be clear, I don't need to add div into the proper dropdownlist controller. I just need to attach.
What I've tried so far and not working:
HTML:
<select id="platypusDropDown">
<option value="duckbill">duckbill</option>
<option value="duckbillPlatypus">duckbillPlatypus</option>
<option value="Platypus">Platypus</option>
<option value="Platypi">Platypi</option>
</select>
<div id="addCategory">
<input id="categoryInput" type="text" /> <br/>
<input id="categoryInputAddBtn" type="button" value="Add new" />
</div>
JS:
$('#platypusDropDown').click(function () {
var myDiv = document.getElementById('addCategory');
this.append(myDiv);
});
Any solution? Thanks in advance.
I don't think so, what you are trying to achieve is possible using select dropdown.What here, i will do is modify my HTML Code and use css style.
<style type="text/css">
ul{ list-style: none;
margin: 0;
padding: 0; }
</style>
Here is my HTML Code: Instead of dropdown, i am using here ul li listing element.
<div class="select-wrapper">
Select Dropdown
<ul id="platypusDropDown" style="display:none;">
<li rel="duckbill">duckbill</li>
<li rel="duckbillPlatypus">duckbillPlatypus</li>
<li rel="Platypus">Platypus</li>
<li rel="Platypi">Platypi</li>
</ul>
</div>
<div class="wrapper" style="display:none;">
<div id="addCategory">
<input id="categoryInput" type="text" /> <br/>
<input id="categoryInputAddBtn" type="button" value="Add new" />
</div>
</div>
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
var flg = 0;
$('.select-wrapper').click(function(){
flg++;
if(flg == 1){
$this_html = jQuery('.wrapper').html();
$("#platypusDropDown").append("<li>"+$this_html+"</li>");
}
$("#platypusDropDown").slideToggle();
});
});
</script>
You can't add DIV to selectBlock. But you can add option into select:
$('#platypusDropDown').click(function () {
var myDiv = document.getElementById('addCategory');
$(this).after(myDiv);
});
LEAVE jQuery Part . This is not possible by setting HTML static markup WITH select Containing DIV . SO IT IS NOT POSSIBLE . u may use markup but , still It wil hide in browser even though u can see in Firebug , div is attached to dropdown.
But if u r asking for : add Text as option in dropdown , then ,
Working FIDDLE
$('#categoryInputAddBtn').click(function () {
var myDiv = $('#categoryInput').val();
//this.append(myDiv);
var option = $('<option/>');
option.attr({ 'value': 'myValue' }).text(myDiv);
$('#platypusDropDown').append(option);
});
As far as I know this is not possible with standard HTML select/option tags. But there are several different libraries emulating dropdown functionality and giving additional functionalities. One of those is UI Kit which provides this among a lot of other features. You can add so called 'Grid' components to the dropdown which can in fact contain anything you want. See detail over here under the headline 'Grid'.
You can add input value to dropdown list.
var $platypusDropDown = $('#platypusDropDown');
$('#categoryInputAddBtn').on('click', function() {
// Value of div input
var $category = $('#categoryInput').val();
// Add to dropdown list
$platypusDropDown.append('<option value="' + $category + '">' + $category + '</option>');
});
Why you whant add div to Options? You could try like this:
$('#platypusDropDown').click(function () {
var dropHeight = $(this.options[0]).height() * this.options.length;
if($(this).data('open')) {
$(this).data('open', false);
$('#addCategory').css('padding-top', '0px')
return;
}
$('#addCategory').css('padding-top', dropHeight + 'px')
$(this).data('open', true);
});
JSFIDDLE DEMO

Issue displaying divs using show.hide?

Hi I have some javascript which works in a standalone web page with 5 divs, what it does is when an option is selected it will show a div and hide the others based on drop down selection.Basically what the code does is when a sector is selected on the drop down that corresponding DIV will be displayed eg pubs.
The problem I am having is in the web page I want this working on I have lots of Div tags and when the page loads all the Divs on the page are hidden, obviously I don't want this.
Any help would be much appreciated
The code that hides all the divs on page load is
$('div').not(name).hide();
Is there a way of solving this problem I cant see how I am going to get round it at the moment.?
JS
<script>
$(document).ready(function () {
function showTab( name )
{
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change( function() {
showTab( $( this ).val() );
});
showTab( $('#dropdown').val() );
});
HTML
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pub-Chains" selected="selected">Pubs </option>
<option value="Councils">Councils </option>
<option value="Property">Property </option>
<option value="Various">Various </option>
<option value="Universitys">Universitys </option>
</select>
</p>
</form>
My Div's are named like so
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
You have to group up the div you want to participate in show hide to separate them from other divs on the page. You can assign a common class to them and use that class to hide them.
Div id="Pub-Chains" class="opt"
Div id="Councils" class="opt"
Div id="Property" class="opt"
Div id="Various" class="opt"
Div id="Universitys" class="opt"
$('div.opt').hide();
$(document).ready(function () {
var ddl = $("#dropdown");
$('#' + ddl.val()).show().siblings().hide();
ddl.change(function () {
$('#' + $(this).val()).fadeIn().siblings().hide();
});
});
See demo
If your target <div>s are all siblings then you can easily do something like follows.
<div>
<div id="Pub-Chains">
<div id="Councils">
<div id="Property">
...
</div>
$(function(){
$("select#dropdown").change(function(){
$('#' + $(this).val()).show().siblings().hide();
}).change();
});
See it here.
If you have a more complicated layout then you can think of using classnames to group the <div> elements.
try this:
$(document).ready(function () {
function showTab( name ){
name = '#' + name;
$(name).siblings().hide(); //<-- hide this way
$(name).show();
}
and if this is not working then you can do this just put it outside of doc ready handler
function showTab( name ){
name = '#' + name;
$(name).siblings().hide(); //<-- hide this way
$(name).show();
}
$(document).ready(function () {
// then all your change stuff here
create a parent div to all this div... and call it in selector..
try this
<div id="tabdivs">
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
</div>
jquery
*updated*
$('#tabdivs').children().not(name).hide();
fiddle here..

Chrome Drop-Down List Problem

I have a problem with Chrome. I have a drop-down list. Except for Chrome, it works well. However with chrome it adds an empty element at first.
HTML Part:
<head>
<script type="text/javascript">
$(document).ready(function() {
townDistrictObject.bind({cityId:1});
});
</script>
</head>
<body>
<div class="left marginleft15">
<p>Town</p>
<p>
<select name="town1" id="townId" style="width: 152px;">
<option selected="selected" value="999999999">Whole Istanbul</option>
<option value="999999998">Anatolian Part</option>
</select>
</p>
</div>
<div class="left marginleft15">
<p>District</p>
<p>
<select id="districtId" name="districtid1" style="width: 174px;" >
<option selected="selected" value="0">Whole Districts</option>
</select>
</p>
</div>
</body>
There is something like that at script side:
var townDistrictObject = {
defaults : {
cityId :1,
townElementId : "townId",
districtElementId : "districtId",
allDistricts: true
},
bind : function(options) {
$.extend(this.defaults, options);
var that = this;
var opts = this.defaults;
var townElement = $('#' + opts.townElementId);
townElement.val(0);
}
};
Explanation of problem:
Firstly, there is an empty element at top of list.(It shouldn't be!)
Secondly, I will click one of them.("Whole Istanbul" for my example.)
Lastly, I check the list and that element at top disappears. Everything is OK after that time.
PS: I checked the code and I think that the problem is related to script side. Thanks for your help.
Could it be that you are doing:
townElement.val(0);
You are setting the dropdown value to zero, when there is no option with this value. Instead of zero, should you be using the value from the defaults?
The problem is setting with wrong id at this line:
townElement.val(0);
The answer with Jquery replacing it with:
townElement.get(0).selectedIndex = 0;

jQuery Append UL with LI with value from dropdownlist on button click

I have a dropdownlist:
<select id="ContentList" name="ContentList">
<option value="">Please Select</option>
<option value="TEST_TOP">TEST TOP</option>
</select>
I have a sortable list:
<ul id="sortable">
<li class="ui-state-default">First</li>
<li class="ui-state-default">Second</li>
<li class="ui-state-default">Third</li>
</ul>
I have a button:
<input type="button" value="Add Section" id="btnAdd" class="button"/>
And the following script:
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
$("#sortable").disableSelection();
$('#btnAdd').click(function() {
});
});
</script>
When a user select something in the dropdown list and clicks Add I want that to get sent to the sortable list as an <li> with the class attribute etc, the dropdown to now show the 'Please Select' option.
Not sure the best approach to take. Thanks
$("#sortable").append("<li class='ui-state-default'>"+
$("#ContentList option:selected").text()+"</li>");
$("#ContentList option:selected").remove();
should do the trick... (:
working demo here
$('#btnAdd').click(function() {
//cache sortable
var $sortable = $("#sortable");
//clone sortables first li, change the text to that of the
//chosen option and append it to the sortable this saves having
//html embedded within the js
$sortable.children().eq(0)
.clone()
.text( $('#ContentList').val() )
.appendTo( $sortable );
// cache select options
var $items = $('#ContentList').children();
//remove selected item
$items.filter(':selected').remove()
//set first option to be selected
$list.eq(0).attr('selected', true);
});

Categories

Resources