How to detect option content change in dropdown using jquery? - javascript

I have a dropdown field, options of which will be changed dynamically.
Is there a way to capture the event, whenever the set of options inside the dropdown is changed?
I do not want to capture the option change i.e
$(".dropdown").on("contentChange", function(){
//do something
})
Rather, I want to capture the event, when the set of options inside the dropdown gets modified.
How can i attach a handler, which will get trigger functions when option set changes.

It is possible to watch DOM changes, in newset DOM specification we have MutationObserver to observe DOM. Working exampe
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
//create observer
var observer = new MutationObserver(function(mutations, observer) {
console.log("Options have been changed");
});
//set to observe childs ( options )
observer.observe(document.querySelector(".dropdown"), {
subtree: true,
childList:true,
attributes:true
});
//test change
$('button').on("click",function(){
$(".dropdown").prepend("<option>New added option</option>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Fourth</option>
</select>
<button>Test button options change</button>
You can use also event DOMSubtreeModified. Event work on major browsers but is DEPRECATED . Working example:
//add event
$(".dropdown").on("DOMSubtreeModified", function(e){
console.log('Options have been changed');
});
//change option example after button click
$('button').on("click",function(){
$(".dropdown").prepend("<option>New added option</option>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Fourth</option>
</select>
<button>Test button options change</button>
I added some example options modification after button click. Event will be called on any DOM change inside select.

You can add your custom event to DOM document and simulte it when content change using jquery .trigger().
$("button").click(function(){
$("select > option:first").text("A1").trigger("contentChange");
});
$("select > option").on("contentChange", function(){
console.log("Content changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change content</button>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>

Related

change document stylesheet with select tag in javascript

I have a drop down box on my website that lets you select your theme. The problem is that I can't figure out how to implement it. Here's the javascript:
//selects the select element
let selectTheme = document.querySelector("#select-theme");
//selects the stylesheet
let style = document.querySelector("#pagestyle");
selectTheme.addEventListener('onchange', () => {
if (selectTheme.value == "dark") {
style.setAttribute("href", "./css/style.css");
}
if (selectTheme.value == "light") {
style.setAttribute("href", "./css/style2.css");
}
console.log(selectTheme.value);
})
HTML:
<link rel="stylesheet" type="text/css" href="" id="pagestyle">
<div class="selection-box">
<select class="select-theme" name="selectTheme" id="select-theme">
<option value="dark" id="dark">dark</option>
<option value="light" id="light">light</option>
</select>
</div>
The even listener itself doesn't seem to work, as it doesn't print out the drop down value.
Also note that this isn't all of my HTML. I just copied and pasted the relevant elements.
The eventlistener is change not onchange
Once you change it your console.log will work
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Toggle class from dropdown menu

I try to toggle a class by selecting a option in the dropdown menu, i've tried using a alert() to check if it works but i cant seem to get it to work.
HTML:
<html>
<body>
<select id="dropdown">
<option value="1">Steinkjer</option>
<option value="2">Verdal</option>
</select>
</body>
</html>
Javascript:
$('#dropdown option:selected').click(function(){
var getText = $('#dropdown option').text();
alert($('.overlay-'+getText));
});
Please help me solve this issue.
$('#dropdown option:selected') is not a live object. Your code binds the click handler to the selected option on page load. You should either use event delegation or better listen to change event of the select element.
$('#dropdown').on('change', function() {
// Get text content of the selected option
var getText = $('option:selected', this).text();
// Get current value of the select element
// var getValue = this.value;
console.log(getText);
console.log($('.overlay-'+getText));
});
You need to:
Check document.ready is executed
Assign the change event
To bind some events to DOM elements, requires a document.ready, to
ensure the DOM element is sure created at the time you associate the
event.
A page can't be manipulated safely until the document is "ready.": https://learn.jquery.com/using-jquery-core/document-ready/
Check this snippet:
$(document).ready(function() {
$('#dropdown').change(function() {
var getText = $('#dropdown option:selected').html();
$("#test").removeClass();
$("#test").toggleClass("overlay-" + getText);
});
});
.overlay-Steinkjer {
background-color: red;
}
.overlay-Verdal {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<select id="dropdown">
<option value="1">Steinkjer</option>
<option value="2">Verdal</option>
</select>
<p id="test">test paragraph</p>
</body>
</html>

Change jquery code from targeting a value to link

Hi i got this html code with a drop down list where i select the option blue or green, and it works great with the jquery below.
<select id="styleSelect">
<option value="styleblue">Blue</option>
<option value="stylegreen">Green</option>
</select>
jquery
$("#styleSelect").change(function() {
updateStyleSheet($(this).val());
});
My question is how to change this code into a clickable link instead of an option value, i already now the html code should be like this
<div id="styleSelect">
click here
click here
</div>
But how should the jquery look like?
$("#styleSelect a").click(function(e) {
e.preventDefault();
updateStyleSheet($(this).attr('href'));
});
You can do:
$("#styleSelect a").click(function(e) {
e.preventDefault(); //stop link
var href = this.href;
});
$("#styleSelect a").click(function(e) {
e.preventDefault();
updateStyleSheet($(this).attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="styleSelect">
click here
click here
</div>

Clicking disabled select element doesn't trigger click or mousedown events on it's parent

Disabled elements such as <select> and <input> doesn't react to click event , I'm trying to wrap them in a <div> and listen to it's click event.
Clicking a disabled <input> triggers the click on it's container <div>, but I am having problem with <select> elements. clicking a disabled <select> element doesn't trigger it's container <div>'s click, as you can see in this JSFiddle Example.
html:
<button onclick="buttonClick()" >Click</button>
<div id="test"></div>
js:
buttonClick = function (){
var editor = $("#test");
var div=$("<div>")
.mousedown(function () {
alert("!!!");
})
.appendTo(editor);
var selecttest = $("<select>")
.attr("disabled", "disabled")
.appendTo(div);
$("<option />").attr("value", '').appendTo(selecttest);
};
If I add an <input> using the following code instead of <select>, it works:
var textinput = $("<input>")
.attr("type", "text")
.attr("disabled", "disabled")
.appendTo(div);
Tests for different browsers:
For IE11: for both input and select it works.
For Firefox: for both input and select it doesn't work.
For Opera and Chrome: forinput it works, for select it doesn't work.
Same problem here, I put a div above the select with a transparent backgroud. i know this not the perfect solution but i works for me.
var notAvailablePopup = function (){
alert( "not available : work on select" );
}
.invisible_div {
width: 68%;
height: 33px;
background: rgba(255,0,0,0);
margin-top: -33px;
z-index:1;
position:absolute
}
.language {
z-index: 0;
}
<div onclick ="notAvailablePopup()" class="row language" >
<select disabled="disabled" class="form-control select-elem" >
<option value="">Translate this video</option> </select>
<div class="invisible_div">
</div>
</div>
The mousedown event doesn't fire on disabled input or select elements, or any mouse event on disabled elements. Here is your example and it adds both the input and select element, try clicking on them, it will not fire an alert. I have made the div with background color red so you can see where it is, so if you click only on the red part it will fire.
So your statement that the mousedown event is fired on disabled input field, but not on disabled select is false :)
var buttonClick = function() {
var editor = $("#test");
var div = $("<div>")
.mousedown(function() {
alert("!!!");
})
.appendTo(editor);
var textinput = $("<input>")
.attr("type", "text")
.attr("disabled", "disabled")
.appendTo(div);
var selecttest = $("<select>")
.attr("disabled", "disabled")
.appendTo(div);
$("<option />").attr("value", '').appendTo(selecttest);
};
select {
width: 200px;
}
button {
width: 70px;
height: 21px;
}
#test div {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button onclick="buttonClick()">Click</button>
<div id="test"></div>
This is exaclty the expected behaviour of disabled, you probably want to disable the <options> ?
I'm a bit late at the battle,
Bojan Petkovski helped a lot but for direct answer :
http://jsfiddle.net/jea1mtz6/
Just added in your CSS on the child element "select" :
pointer-events: none;
The element is never the target of pointer events. But events may target its descendant elements.
Other answers don't work on all browsers (z-index) or "cheat" with a semi-hack (readonly).
Tested on Chrome and firefox
Disabled elements do not listen to click events, this is the behavior of disabled elements. Elements with readonly property listen to click events.
Also, your code has an error.
I corrected the error in your code. The scenario mentioned in your question will not respond to click event since select is disabled. If you change disbaled to readonly then it will work.
buttonClick = function (){
var editor = $("#test");
var div=$("<div>")
.mousedown(function () {
alert("!!!");
})
.appendTo(editor);
var selecttest = $("<select>")
.attr("readonly", "true")
.appendTo(div);
$("<option />").attr("value", '').appendTo(selecttest);
};
See this fiddle - http://jsfiddle.net/Ashish_developer/5d4qewps/1/

How to create dynamic content in a web page according to the option selected in drop down menu

I have a webpage where i have a dropdown menu with default option not selected. When the user selects an option then i want display textboxes related to that option. How can i do this. For example i have these images
Really depends on how many options you have in the list box and if the textboxes are shared between the options.
You could created hidden DIVs which are then shown when an option is selected. You would need to create a JavaScript function which is fired using the onChange event attached to the drop down.
If you were sharing the textboxes then given them specific classes which you can show/hide in the Javascript function, this is relatively simple if you use something like jQuery.
Add an event handler for selection changed like so:
$('#yourSelectId').change(function() {
var selectedVal = $('#yourSelectId option:selected').attr('value');
});
Then make some hidden divs visible depending on the selected value( $.('.class').hide() ).
Use divs whose visibility is set to be hidden, and make it visible on select event. You can use multiple divs for atheistic purpose, associated with a select event.
An example can be found in post 2 at -
http://www.codingforums.com/showthread.php?t=167172
This is quite simple. All textboxes are hidden and with an event on your dropdown menu, you just show the right div.
HTML :
<select id='dropdown' onchange='showDiv()'>
<option>Select</option>
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
</select>
<br /><br />
<div id="div1" style='display: none;'>Div 1</div>
<div id="div2" style='display: none;'>Div 2</div>
JS
<script type="text/javascript">
function showDiv() {
var div = document.getElementById("dropdown").value;
if(document.getElementById(div) != null) {
hideAllDiv();
document.getElementById(div).style.display = "block";
}
}
function hideAllDiv() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
}
</script>
The code above is ugly but you can do it better with jquery and some css.
Edit :
Example with Jquery
<select id='dropdown'>
<option>Select</option>
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
</select>
<br /><br />
<div class='div' id="div1">Div 1</div>
<div class='div' id="div2">Div 2</div>
<style type="text/css">
.div { display: none; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
$(".div").hide();
$("#" + $(this).val()).show();
});
});
</script>

Categories