Display elements in dropdown with jquery - javascript

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.

Related

How to save selected dropdown item to database table

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>

How to I modify the code to apply it for three drop-downs? (Jquery)

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

How you can I put selected = "selected" dynamic?Jquery

I have this sample:
link
CODE HTML:
<select name="card_type" id="card_type" class="card-sel com-c select-full">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>
CODE JS:
$( document ).ready(function() {
var stateSelectValue = "Mastercard"; //this value in my site returns a dynamic type of card
console.log("primul log" + stateSelectValue);
if(stateSelectValue)
{
console.log("al doilea log" + stateSelectValue); $("#card_type").val(stateSelectValue).attr("selected","selected").trigger("change");
console.log("al treilea log" + stateSelectValue);
}
$( ".com-c" ).change(function() {
var data= $(this).val();
console.log(data);
});
});
Perhaps the example understand what they want to do.
Basically when they are receiving a value in the variable stateSelectValue to look if there is value in that list and make selected.
For example IF:
var stateSelectValue = "Mastercard";
then
<option value="mastercard" selected="selected">Mastercard</option>
and so on...
Can you help me to solve this problem please?
Thanks in advance!
First as I have already commented, you do not need to set attribute selected and trigger change function.
$("#card_type").val(stateSelectValue)
This should be enough.
Second, if you do this change, still it will not work. W
Why?:
Variable value:
var stateSelectValue = "Mastercard";
is not equal to value of option
<option value="mastercard">Mastercard</option>
Updated Codepen
You were all good just one typo mistake, your selected value was in capital i.e "Mastercard" where as in option value it was "mastercard". But in simple way doing below was enough without trigger change event.
var stateSelectValue = "mastercard";
$("#card_type").val(stateSelectValue)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select name="card_type" id="card_type" class="card-sel com-c select-full">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>
This question already asked some . please refers the below link:
JQuery setting the selected attribute on a select list
$(document).ready(function () {
$('#card_type').val("mastercard"); // Select by value
text1 = "Maestro";
$("#card_type option:contains(" + text1 + ")").attr('selected', 'selected'); // select by text
});

How to have the current selected value option under dropdown in tablepress?

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();
});

How to assign an ID to a dynamic dropdown select?

I want to assign a session ID (this will be hidden) whenever the first select dropdown is used. The session ID is the number 300, 301, etc. after the "day".
When a user selects something from the "preferred" dropdown it should assign the "300" value to the "sessionid" dropdown and simultaneously change the value of the "day" dropdown (which works already btw)
How do I do implement it properly?
Please see code below:
<select id="preferred" class="preferred" name="preferred">
<option value="">- Select -</option>
<option value="Mountain Dew">Mountain Dew</option>
<option value="Seven Up">Seven Up</option>
</select>
<select id="day" class="day" name="day">
<option value=""></option>
</select>
<select id="sessionid" class="sessionid" name="sessionid">
<option value=""></option>
</select>
$(function() {
var selectValues = {
"Mountain Dew": {
"Monday": "300"
},
"Seven Up": {
"Tuesday": "301"
}
};
var $preferred = $('select.preferred');
var $day = $('select.day');
var $sessionid = $('select.sessionid');
$preferred.change(function() {
$day.empty().append(function() {
var output = '';
$.each(selectValues[$preferred.val()], function(key, value) {
output += '<option value="' + key + '">' + key + '</option>';
});
return output;
});
}).change();
});
example : http://jsfiddle.net/creativemix/5ZWrE/2/
Try this if you want to set the value of session id dropdown. Include this after setting the output variable in your fiddle.
$sessionid.empty()
.append($("<option></option>")
.attr("value",value)
.text(value));
Here's a link to the fiddle.
But, as others already suggested, why not use a hidden text field to store the value?
To store the value in a hidden field,
<input type="hidden" id="hdnSessionId" />
And add this to the script.
$('#hdnSessionId').val(value);
You can use Element.id = 'id' to set an id in javascript.
https://developer.mozilla.org/en-US/docs/Web/API/Element.id
In your code that would probably be something like this at the point where you want to assign the id:
$sessionid[0].id = $day.val();
But please note an id must start with a letter and numbers are generally bad practice even if it does work.
Putting the value you need in a hidden field is probably preferable over this solution.

Categories

Resources