When the first dropdown is selected, I'm trying to dynamically update the options in the second dropdown. It's working fine in FF, Chrome etc but doesn't work in IE 8/9 and I don't understand why. Here's a jsFiddle
<div class="custom-field">
<label for="dropdown1">Select country:</label>
<select id="dropdown1" name='properties[country]'>
<option value="USA">USA</option>
<option value="JAPAN">JAPAN</option>
</select>
</div>
<div class="custom-field">
<label for="dropdown2">Select font:</label>
<select id="dropdown2" name='properties[font]'>
<option class="us" value="font1">Font1</option>
<option class="us" value="font2">Font2</option>
<option class="us" value="font3">Font3</option>
<option class="jp" value="font4">Font4</option>
<option class="jp" value="font5">Font5</option>
<option class="jp" value="font6">Font6</option>
</select>
</div>
function showFont(fontOpt){
if (jQuery('#dropdown1').val() === 'USA'){
var showOptions = fontOpt.filter('.us');
} else {
var showOptions = fontOpt.filter('.jp');
}
jQuery('#dropdown2').html(showOptions);
jQuery('#dropdown2').prop('selectedIndex', 0);
}
$(document).ready(function() {
// get the child elements of font dropdown
var fontOptions = $("#dropdown2").children('option');
$("#dropdown2").html('');
showFont(fontOptions);
$('#dropdown1').on("change", function(e){
showFont(fontOptions);
});
});
$("#dropdown2").html('');
problem is with this line. Remove this line and your code will work fine.
Instead of this you may use
$("#dropdown2").children('option').remove();
Is this your HTML code above? If so, then you need to put script = 'text/javascript' from function showFont to the end. This makes the computer read the code as javascript and not HTML which i think your asking it to do. Hope this helps.
Comment the following line in jquery;
//$("#dropdown2").html('');
it will work.
You can use short method like below:
var fontOptions = $("#dropdown2").children('option');
$("#dropdown2").html('');
Instead of
var fontOptions = $("#dropdown2").children('option').remove();
Related
I am using Select2 jQuery Plugin.
https://select2.github.io/ for reference
When I am using the multiple dropdown option. The result of selected items is shown as tags in a box but, I just want to show the number of items selected.
Is it possible with Select2 jQuery plugin
HTML
<select multiple style="width:100%">
<option value="1">Name1</option>
<option value="2">Name2</option>
<option value="3">Name3</option>
<option value="4">Name4</option>
<option value="5">Name5</option>
<option value="6">Name6</option>
<option value="7">Name7</option>
</select>
JS
$('select').select2();
I want output as below
instead of tag like output.
Example working Fiddle
You can add this code after initializing select2
$('select').on('select2:close', function (evt) {
var uldiv = $(this).siblings('span.select2').find('ul')
var count = $(this).select2('data').length
if(count==0){
uldiv.html("")
}
else{
uldiv.html("<li>"+count+" items selected</li>")
}
Ref: jsfiddle
Reference to select2 events: Here
Edit: If you want to display a blank when user deselects everything,
Use this fiddle: here
Edit: Updated to remove flaw in deselection of data and changed it to main answer.
Fiddle: here
Selectors can certainly be improved, but as a blueprint, adding a counter element on change and hiding the tags like this seems to work as asked.
$('select').select2({closeOnSelect: false}).on("change", function(e) {
$('.select2-selection__rendered li:not(.select2-search--inline)').hide();
$('.counter').remove();
var counter = $(".select2-selection__choice").length;
$('.select2-selection__rendered').after('<div style="line-height: 28px; padding: 5px;" class="counter">'+counter+' selected</div>');
});
.counter{
position:absolute;
top:0px;
right:5px;
}
.select2-search--inline{
background-color:Gainsboro;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select multiple style="width:100%" id="mySelect">
<option value="1">Name1</option>
<option value="2">Name2</option>
<option value="3">Name3</option>
<option value="4">Name4</option>
<option value="5">Name5</option>
<option value="6">Name6</option>
<option value="7">Name7</option>
</select>
although the answer is given.
you can try this code. first initialize than on close call it.
jQuery('.multi-select-pbwp').select2();
$('.multi-select-pbwp').on('select2:close', function() {
const $select = $(this);
const numSelected = $select.select2('data').length;
$select.next('span.select2').find('ul').html(function() {
return `<li class="class="select2-selection__choice">${numSelected} selected</li>`;
})
});
I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}
You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/
Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});
I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/
This works fine in all the other browsers except for IE. Even in IE10 it doesn't want to cooperate. Any help would be appreciated. I have a form with a drop down menu that when different a user makes a selection it brings up a div with a different form we have 10 forms in all that they can choose from. Right now it does nothing in IE, no console errors or anything.
Script
var sections = {
'second': 'section2',
'third': 'section3',
'forth': 'section4',
'fifth': 'section5',
'sixth': 'section6',
'seventh': 'section7',
'eigth': 'section8',
'ninth': 'section9',
'tenth': 'section10',
'eleventh': 'section11'
};
var selection = function (select)
{
for (i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
}
$("#target option")
.removeAttr('selected')
.find(':first')
.attr('selected', 'selected');
The HTML
<select id="forms" onchange="selection(this);">
<option >Select an option</option>
<option value="tenth">General Inquiry</option>
<option value="second">Account Inquiry</option>
<option value="third">ARC Request</option>
<option value="forth">Contact Information Update</option>
<option value="fifth">Contact your Board</option>
<option value="sixth">Document Request</option>
<option value="seventh">Maintenance Issue Reporting</option>
<option value="eigth">Violations Reporting</option>
<option value="ninth">Closing Statement</option>
<option value="eleventh">Request for Proposal</option>
</select>
Then 11 divs
<div id="section10" style="display:none;">
<h2>General Inquiry</h2>
</div>
Your problems turns out to be that selection has special meaning inside IE.
For your code, IE produces following error
SCRIPT5002: Function expected
Which tells something about the issue.
A workaround to prevent this issue is to change your function name, like
var selectionFunc = function (select){...}
and in your markup,
<select id="forms" onchange="selectionFunc(this);">
....
</select>
I hope it helps
UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.