I add json data into option data-values
In action when I click on option, my jQuery code add data-values data to option list in #target using JSON.parse, each, and append methods.
$('#list').change(function() {
var response = JSON.parse($(this).find(':selected').attr('data-values'));
var len = response.length;
$("#target").empty();
$.each(response, function() {
$.each(this, function(name, value) {
$("#target").append("<option value='" + name + "'>" + value + "</option>");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="list">
<optgroup label="Hardware">
<option value="5" data-values='[{"34":"500GB","35":"1TB","36":"2TB","37":"4TB"}]'>
HDD
</option>
<option value="11" data-values='[{"63":"Ardreno 650","64":"Adreno 640","65":"NVIDIA GeForce GTX 1650","66":"NVIDIA GeForce GTX 1080","67":"NVIDIA GeForce GTX 2070","68":"NVIDIA GeForce GTX 2080"}]' selected="selected">
Graphics
</option>
</optgroup>
</select>
<select id="target"></select>
Now, in create page my code work true, But I have a big problem in post back. When I send data to my php controller and my controller return any error, I need to add old select data (send data) into #target list. Actually I need to auto load #target list on page load if #list option is selected and add selected to #target option list.
Worked demo
Doesn't work demo (add selected to option)
Try this: $('#list').trigger('change');
Related
I am trying to achieve the following thing in my code but it is getting complicated.
I have 'n' dropdowns with or without duplicate values in it.
for simplicity lets assume following scenario:
dropdown1:
<select>
<option>100</option>
<option>200</option>
<option>102</option>
</select>
dropdown 2:
<select>
<option>100</option>
<option>200</option>
<option>201</option>
</select>
dropdown3 :
<select>
<option>100</option>
<option>300</option>
<option>301</option>
</select>
case1:
if user select value 100 from dropdown 1 then 100 should be removed from all the dropdowns.and when user change dropdown 1 value from 100 to 200 then 100 should be added back to all the dropdowns and 200 should be removed from all the dropdowns.
removing seems easy but adding back values is little difficult.
how can I maintain a list or some other data structure to remember which value to add and where incase of multiple value change? is there any advance jquery feature or generic javacript logic i can use ?
If it is sufficient to just disable the option instead of actually removing it, the following could work for you. You might want to adapt the handling of the selects when initially loading the site.
$('select option[value="' + $('select').eq(0).val() + '"]').not(':eq(0)').prop('disabled', true);
$('select').on('change', function() {
var val = $(this).val();
$('select option').prop('disabled', false);
$('select option[value="' + val + '"]').not($(this)).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='102'>102</option>
</select>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='201'>201</option>
</select>
<select>
<option value='100'>100</option>
<option value='300'>300</option>
<option value='301'>301</option>
</select>
It would be better to set display to none instead. Hence, you will avoid the complications of adding or removing in the appropriate order.
So, you can easily return them visible.
$( "option" ).each(function( index ) {
$(this).css("display", "");
});
$("#drop").change(function () {
var selected_value=$(this).val();
var dropdown=$(select);
for(i=0;i<dropdown.length;i++){
$("dropdown[i] option[value=selected_value]").remove();
}
});
Set id of first dropdown="drop"
Here select the value and define it S a variable loop through dropdown with in page remove option when value=selected_value
I have a dropdownlist that im fetching from my database and displaying in my php file as follows:
<script type="text/JavaScript">
//get a reference to the select element
var $select = $('#bananas');
//request the JSON data and parse into the select element
$.getJSON('http://127.0.0.1/folder/bananas.json', function(data){
//clear the current content of the select
$select.html('');
//iterate over the data and append a select option
$.each(data.allbananas, function(key, val){
$select.append('<option id="' + val.id + '">' + val.name + '</option>');
})
});
my html file
<select id="bananas" class="form-control">
<option value="">-- Select A Banana -- </option></select>
But i need user to select each banana from a form and when he or she submits it must be saved to a different table using php.How do i do this,seeing as the dropdownlist is coming from a json file?
Ajax solutions are also welcome.
What you need is:
on Select option change, update a table?
Try this..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<select id="bananas">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
<script>
$("#bananas").change(function(){
// var option holds the selected option value whenever changed
var option = $("#bananas").val();
console.log(option);
/*
It would be better practice to add the data to a DB like mySQL and then generating a JSON file from there
However you can just send this information as you already wanted this way
*/
$.ajax({
url: './myphpfile.php',
data:
{
option:option
}
}).done(function(resp){
if(resp == 200) {
console.log("Success!");
}else if(resp == 0){
console.log("Failed..");
}
});
});
</script>
I have a jquery code which changes according to the previously selected value of drop-down.
I use it when I have two drop-downs and it works flawlessly.
Now the problem is that I am working with 3 drop-downs and I am unable to modify the code according to 3 drop-downs (reason my being new to jquery).
This is the code:
Jquery:
jQuery(function(){
var $cat = $('select[name=coursename]'),
$items = $('select[name=semno]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);});});
I used two drop-downs namely, coursename and semno, with this code and it works perfectly fine.
Now I want to add another dropdown, subnm which comes after semno.
So what I exactly want is that when a person makes a particular selection in coursename the relevant items should appear in semno and among those relevant items, when a value is selected, the items are listed on subnm accordingly.
I have used rel and class in the option element.
HTML Code
Course:
<select name="coursename" id="coursename">
<option value="xyz" rel="xyz">XYZ</option>
<option value="abc" rel="abc">ABC</option>
</select>
Semester:
<select name="semno" id="sem">
<option value="one" class="xyz">I</option>
<option value="two" class="xyz">II</option>
<option value="three" class="abc">III</option>
</select>
Subject:
<select name="subnm" id="subnm">
<option value="p">p</option>
<option value="q">q</option>
<option value="r">r</option>
</select>
I guess I will need a rel option on the semno drop-down and then class on the subnm drop-down in accordance to the semno rel.
Forgive me if I am not 100% comprehensible. I am new to this site and I really need help.
Thank You in advance!
Hope this is what you want. I have used the same function for change event for the second select menu.
$items.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $third.find('option.' + rel);
if ($set.size() < 0) {
$third.hide();
return;
}
$third.show().find('option').hide();
$set.show().first().prop('selected', true);
});
Also I have triggered the change event for second select in change event handler of first select.
$items.trigger("change");
Please refer this fiddle
I would like to know how to have the selected option value under dropdown after selecting it, because whenever I'm selecting any option, it gets deleted and comes beneath the dropdown option with a link. When you click it, it is going back to the dropdown menu. Code before selection
<div class="column-filter-widget">
<select class="widget-0">
<option value="">Healthy Life</option>
<option value="Fruit">Fruit</option>
<option value="Vegetable">Vegetable</option>
<option value="Beef">Beef</option>
</select>
HTML Code after selecting option as "Fruit"
<div class="column-filter-widget">
<select class="widget-0">
<option value="">Healthy Life</option>
<option value="Vegetable">Vegetable</option>
<option value="Beef">Beef</option>
</select><a class="filter-term filter-term-fruit" href="#">Fruit</a>
</div>
Css Code:
.column-filter-widgets a.filter-term:hover {text-decoration: line-through!important;}
Here is the javasript file Click here to check javascript file. I know there are many threads similar to that but since this problem is for Wordpress Plugin tablepress datatables column filter widgets and it's under javascript file which I don't know how to solve. I'm sure the problem can easily be solved after looking at the above link.
Thanks
Try this, i'm assuming this what you were after from what i read, here's a JS Fiddle to show you http://jsfiddle.net/7a38ast6/7/
JQuery
var optionvalue = 0;
var optionvalueclass = ""
$('select.widget-0').change(function(){
optionvalue = $('option:selected', this).text();
optionvalue = optionvalue.replace(" ", "-");
optionvalueclass = optionvalue.toLowerCase();
$(".widget-0").after('<a class="filter-term filter-term-' + optionvalueclass + '" href="#">' + optionvalue + '</a>');
$('option:selected', this).remove();
});
Good day community,
I have an ASP.NET MVC4 project, where on edit page I'm use jquery script. But I have a problem to display elements on the page.
Here is my dropdown's HTML markup before changes:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option value="3">testtsi</option>
<option selected="selected" value="4">testrtu3</option>
</select>
And here is after jquery changes
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
But it's display on the page not a selected element testrtu3, always display first element. And when I click save button saved my first value.
Here is my jQuery function:
$(document).ready(function () {
var values = [];
$(".checkboxUniversities:checked").each(function () {
values.push($(this).val());
});
$.getJSON('/Administrator/ProgramList/' + values, function (data) {
alert('Return json result new information');
var items = '<option disabled>Select a Program</option>';
$.each(data, function (i, program) {
items += "<option value='" + program.Value + "'>" + program.Text + "</option>";
});
$('#ProgramId').html(items);
});
//var selectedElement = $("#ProgramId").find(":selected").text();
});
I guess I need somehow add selected value when create my dropdown inside jquery, or after creating, but I don't know how. Can anybody help me?
Before appeding options to your dropdown you have to save selected index or text in variable and use it further.
Sample Code:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
<input id="click" type="button" value="click me"/>
$(document).ready(function(){
var option = '<option value="1">testrtu1</option><option value="2">testrtu2</option><option value="3">testtsi</option><option value="4">testrtu3</option>';
$("input#click").click(function(){
var selInx = $("select[name='ProgramId'] option:selected").index();
$('#ProgramId').html(option);
$('select#ProgramId').prop('selectedIndex', selInx);
});
});
DEMO FIDDLE
NOTE: As we cannot connect to your backend code to get options hardcoded in code itself and on click of button dropdown will be replaced with latest options and will update the selected index based on first one. You can use either selectedindex or text based on your requirement.