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
Related
I am currently tackling some JQuery and Javascript and I have encountered a small problem that I can't for the life of me figure out how to solve.
I have a form which dynamically loads information from a json file which re-uses a "wpTemplate" and populates a select list. This form compromises something of the following;
<div class="wp" id="wpTemplate" >
<input type="checkbox" id="wpCheck" name="" class="wp" value="">
<label id="wpLabel" class="wpLabel"></label>
<div class="uc" id="uc">
<select class="ucSelect" id="ucSelect" name="case" multiple>
<option id="option" class="option"></option>
</select>
</div>
</div>
In essence, there could be multiple div "wpTemplate". My aim is to somehow have the ability to select either one or many "wpCheck" checkbox and for the "uc" div to display depending on the specific checkbox being selected.
I tried adding style="display: none;" to the "uc" class and a simple if-else statement with the show/hide functionality but to no avail.
$('.wp').each(function() {
if($(this).is(":checked")) {
$('.uc').show();
} else {
$('.uc').hide();
}
});
I'm new to JQuery so any help or alternative ways would be much appreciative.
How about:
$('.wpCheck').on('change', function () {
var $uc = $(this).closest('.wpTemplate').find('.uc')
if ($(this).prop('checked')) {
$uc.show()
} else {
$uc.hide()
}
})
Here's a working fiddle
Here is another way:
$( document ).ready(function() {
$('input.wp').change(function() {
var $this = $(this);
if ($this.is(":checked"))
{
$this.siblings('div.uc').show();
}
else
{
$this.siblings('div.uc').hide();
}
});
});
fiddle
I’m looking for some direction for my problem.
I’ve HTML divs and I want to replicate it when user clicks on span with id plus-1.
This is my html
<div id = “tab”>
<div class="row">
<div>
<select id="ProjectsFolder0FolderId" name="data[ProjectsFolder][0][folder_id]">
<option value="1">Project Presentation</option>
<option selected="selected" value="4">Project Root</option>
</select>
</div>
<div>
<div>
<input type="text" required="required" id="ProjectsFolder0Linux" value="xyz" name="data[ProjectsFolder][0][linux]">
</div>
</div>
<div id="plus-1" >
<span>
Click here
</span>
</div>
</div>
</div>
Jquery
$(document).on('click', '#plus-1' , function() {
var html = "<div class=\"row\" >"
???
+ "</div>";
$('#tab').append(html);
});
It is appending above html defined in jquery , but I don’t know how to append entire HTML efficiently as required above on each click.
Demo FIDDLE
Jquery
$(document).on('click', '#plus-1' , function() {
var html = $(this).parent().clone();
html.find('#plus-1').attr('id','plus-'+($('#tab').find('.row').length+1));
$('#tab').append(html);
});
Made a jsfiddle for you - http://jsfiddle.net/23GCn/. You also have an error in your html, you need to use correct parenthesis on <div id="tab">
jQuery(function($){
var count = 1;
$(document).on("click", "[id^='plus']", function(){
newBlock = $(this).parents(".row").clone();
count += 1;
// change id of Plus button
newBlock.find("[id^='plus']").attr("id", "plus-"+count);
// Change id and name of select box
newBlock.find("select")
.attr("id", "ProjectsFolder"+count+"FolderId")
.attr("name", "data[ProjectsFolder]["+count+"][folder_id]");
// Same for input
newBlock.find("input[type='text']")
.attr("id", "ProjectsFolder"+count+"Linux")
.attr("name", "data[ProjectsFolder]["+count+"][linux]");
// append new element to your tab
$("#tab").append(newBlock);
});
});
Note that [id^='plus'] type selectors are very inefficient, means, slow. Consider using classes instead of ids, this way you avoid all of the code required to change ids, since you can't have elements with same id on your page obviously.
I have an html form that has a field that needs to become hidden and replaced with another when a button is clicked. I can't get rid of this field altogether because its value still must be submitted. Here is some sample code for reference:
<select id="Id.0" onChange="changeTextBox();">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
Basically what needs to happen is when the addButton is clicked, Id.0 must disappear (but remain a member of the form) and be replaced by an identical field with id="Id.1" then upon clicking again id="Id.2" and so on.
Is there a way, using JavaScript or jQuery, to hide and replace this field upon clicking this button? Thanks!
This with jQuery might help.
elmCount = 0;
function addQual()
{
$("#Id." + elmCount).css('visibility', 'hidden');
$("#Id." + elmCount).css('height', '0px');
elmCount += 1;
}
Thanks to comments.
<div id="divAny">
<select id="Id.0" onChange="changeTextBox();">
</div>
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
var index = 0;
function addQual(){
$("#divAny").hide();
$("#Id."+index).attr("id" , "Id."+ (++index));
}
As an alternative to #MahanGM's answer, I would minimise the use of jQuery here and do only the following in your addQual function:
addQual = function() {
$('select').toggleClass('hidden');
}
You then need a css class hidden to hide the required element. As others have said, you must not use display: none if you don't want to lose the value of the input.
.hidden {
visibility: hidden;
height: 0;
}
And you start out in your markup with both selects present, only the one you initially want hidden has the appropriate class:
<select id="Id.0">
<select id="Id.1" class="hidden">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
A basic example with spans: http://jsfiddle.net/5Dayf/1/
Cleanest solution in my eyes: see here jsFiddle
HTML, nothing special:
<select class="replaceableSelect" id="Id.0">
<option name="one" value="one">One</option>
</select>
<button id="addButton">Add</button>
Javascript using jQuery:
$(document).ready(function () {
var changeTextBox = function () {
/** Your code goes here */
};
// add the onchange event to all selects (for the current one and future ones)
$(document).on("click", "select.replaceableSelect", changeTextBox);
var currentId = 0,
currentSelect = $("#Id\\.0");
$("#addButton").on("click", function (e) {
// hide the old select
currentSelect.addClass("invisible");
// create the new select with increased id and add onchange event
currentSelect = $('<select class="replaceableSelect" id="Id.' + (++currentId) + '"><option name="two" value="two">Two</option></select>').insertAfter(currentSelect).bind("change", changeTextBox);
});
});
CSS:
.invisible{
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
border: none;
}
Hint: To process the results of your form, please make sure, every select gets a unique name.
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..
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;