drop down list changed - javascript

in my application I need to check if a drop down list has changed or not. can you please let me know how I should write it?
if (document.form.dropdownlist.???)
I don't know what to write instead of ????

You could give this dropdownlist an unique id:
<select name="foo" id="foo">
...
</select>
and then subscribe for the onchange event (make sure you make the subscription once the DOM is loaded, for example in the body onload method):
var ddl = document.getElementById('foo');
ddl.onchange = function() {
alert('the value has changed');
};

var count=3;
function check()
{
var obj =new Array();
obj=document.getElementById("list");
checkLength(obj.length);
}
function checkLength(len)
{
if(len>count)
{
alert("Drop down size changed");
}
}
Take three option elements in select element.
Call the method check() using onchange() to get the size of drop down list.
The variable count is used to store the drop down list size .
So that it can be used to check if drop down list is changed.

Related

Get the value of a Combobox select in WP editor

In a Wordpress installation I have a custom post type and a metabox with custom post_meta fields.
Parent dropdown field in Gutenberg's sidebar used to be a <select> element. I have some scripts that onChange trigger the hide/show of different fields making them conditional, depending whether the page being edited is a parent or child:
$(document).on("change", ".editor-page-attributes__parent select", function(){
toggleFields();
}
The options in the <select> have IDs as values so I could get Title and ID for the selected parent and dynamically show some data in the metabox for my user:
var dropdown = $('.editor-page-attributes__parent select');
var parentName = dropdown.find(':selected').text();
var parentId = dropdown.val();
Since v5.6 Wordpress has replaced that select element with a Combo Box. I have tried to get the same data onChange and only had some success using blur:
$(document).on("blur", ".editor-page-attributes__parent .components-combobox-control__input", function(){
toggleFields();
var parentName = dropdown.val();
})
I was only able to get the page title since this combobox now has an input element that's missing IDs, like this one:
<input id="components-form-token-input-0" type="text" class="components-combobox-control__input components-form-token-field__input" value="Page Name Here">
I have also tried doing an Ajax, to retrieve the ID using get_page_by_title() but it does not always work because pages might have the same title and editor also adds dashes and spaces in names for hierarchy levels.
How can I get the associated ID of the page selected in the Parent Combobox on change?
After some time reading the Editor Documentation I found the proper solution. This is how you can listen to changes and get the id of the Parent Combobox select in the WP Editor:
wp.data.subscribe( function () {
var newParent = wp.data.select('core/editor').getEditedPostAttribute('parent');
console.log(newParent);
} );
wp.data.subscribe is called every single time a change occurs in the current state while editing posts in the editor, so the listener function is called every single time. We can avoid that with a simple variable check when there is an actual change to the field we want. It behaves as Redux subscribe without unsubscribe and only one listener.
To also check for the current post type we are editing we can use getCurrentPostType:
wp.data.select('core/editor').getCurrentPostType();
This is the full code for this problem for future reference:
if (wp.data.select('core/editor').getCurrentPostType() == 'cpt_name') {
const getPostParent = () => wp.data.select('core/editor').getEditedPostAttribute('parent');
// set initial parent
let postParent = getPostParent();
wp.data.subscribe(() => {
// get current parent
const newPostParent = getPostParent();
// only if parent changes
if( postParent !== newPostParent ) {
// Do what we want after parent changed
toggleFields();
}
// update the variable
postParent = newPostParent;
});
}

update select dropdown values using angularjs/javascript

I have a drop down(dropddown2) which is displayed using a json object:
listData:[{id:"1",label:"lbl1"},{id:"2",label:"lbl2"}]
When I select a value in dropddown1, I need to add a value to the dropdown2 list and display it. I think I am able to push the data, but I cannot see it on UI.
On dropdown1, you'll need to add an event listener for the onchange event that triggers a function where you can capture the selected value and add a new value to the other dropdown.
You can do something like this:
<select id="carsSelector" onchange="addToSelector();">...</select>
function addToSelector() {
var val = document.getElementById('carsSelector').value;
var selector = document.getElementById('addSelector');
var option = document.createElement("option");
option.text = val;
selector.add(option);
}
Here's a fiddle showing this.

access html element value javascript

I've got three dropdown menu's which are dynamically filled from the database each time I select an option in the previous dropdown menu.
Now I want to access the values in these dropdown menu's, so that I can build a SQL-query somewhere later.
I've used the following code to access the HTML elements:
$( window ).load(function(){
var e = document.getElementById("slctTable");
var slctTableValue = e.value;
console.log(slctTableValue);
});
This code only works the first time the page loads, so when I mess around with the dropdown menu's, nothing changes.
What I want now, is that each time I select a value in the dropdown menu, it updates the slctTableValue variable.
Bind change event to the drop-down with jquery, then this event will fire whenever there is a change happened on the selected value.
$("#slctTable").change(function() {
var slctTableValue = $(this).val();
console.log(slctTableValue);
});
You can detect change event like this and update value:
document.getElementById('slctTable').addEventListener('change',function(){
var e = document.getElementById("slctTable");
var slctTableValue = e.value;
console.log(slctTableValue);
});

Get All Checked Child Items Kendo Grid

I have a Kendo grid that has Child elements as shown in the Image below. Is there a way to read the elements that are checked.
It depends on when you want to find out what checkboxes are selected, but essentially it will work this way.
You simply add a listener to a button or a common class among the checkboxes that looks at the checkboxes and returns the checked ones.
The example from Kendo: http://dojo.telerik.com/UhANu
Specifically,
$("#showSelection").on("click", function () {
var checked = [];
for(var i in checkedIds){
if(checkedIds[i]){
checked.push(i);
}
}
alert(checked);
});
I've changed the above to a .on() instead of .bind because it's what I'm more familiar with being the idiomatic way of doing listeners, but both technically work.
If you'd rather have value of the checkboxes save each time you change them it'd be something like this:
$(".checkbox").on("click", function () {
var checked = [];
for(var i in checkedIds){
if(checkedIds[i]){
checked.push(i);
}
}
$('#checked-boxes').val(checked);
});
and in your html create an element that holds the values:
<label for="checked-boxes">Checkboxes that have been selected:</label>
<input type="text" id="checked-boxes" name="checked-boxes">

How to add more options in Javascript dependent options?

I want to add more dropdown options in this file:
http://parseven.com/java_ex.html
Now it has two and I want to make three more. Third option must be dependent on second option and so on.
Please advise me. Thanks in advance.
Where is the data coming from? I'm not sure which part of the answer you need most:
You need to add an event handler to the OnChange event of the first dropdown.
In the event handler, you need to get the data from somewhere (AJAX?)
Then you need to take the new data and add it to the second dropdown.
Here is basically what you do:
document.getElementById('dropdown1').onchange = yourFunction;
function yourFunction() {
//Here is where you need to get the data
//Then you need to add them to the other dropdown like this:
var dropdown2 = document.getElementById('dropdown2');
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
dropdown2.options.add(optn);
}

Categories