On my JSP Page have select field like this, Need to write a script- SCript should be like sending value from front end as per user selection. If selected is ALL US than all 4 entries should be selected, If all NJ than all inside NJ Should be selected and sent back to database in sql query.
<select multiple="multiple" class="form-control" id="SelectRegion" name="SelectRegion">
<option value="0" selected="selected">All(US)</option>
<option value="00001">All (NJ) </option>
<option value="123">Ship -1008 (NJ - 123) </option>
<option value="234">Ship -4120 (NJ - 234) </option>
<option value="00040">All (CA) </option>
<option value="345">Ship -1008 (CA - 345) </option>
<option value="567">Ship -4120 (CA - 567) </option>
</select>
If you're going to hardcode the specific values you want selected, then you can just set the values of your select tag directly using jQuery like so:
if ($("#SelectRegion").val() == 0) {
$("#SelectRegion").val(["123", "234", "345", "567"]);
}
Otherwise, you can add a class name to the elements for US and NJ and have some jQuery trigger whatever event you would like to select them dynamically:
if ($("#SelectRegion").val() == 0) {
$('.US').prop("selected", true);
}
If you don't necessarily need the selection reflected on the front end and just need the corresponding values, then you can again use class names to iterate through the values:
if ($("#SelectRegion").val() == 0) {
$(".US").each(function() {
// do something
});
}
Related
my multi-select selection is only giving the output as my first selection. I'm sending the data to firebase, and only the first selection is reflected there. For example, if I select (energy, health care, real estate) in my firebase it only shows energy.
Here is my HTML code:
<select name="Sector" value="sector" id="interested_sector" class="selectpicker" multiple="multiple" data-live-search="true">
<option value="">Sector</option>
<option value="energy">Energy</option>
<option value="materials">Materials</option>
<option value="consumer discretionary">Consumer Discretionary</option>
<option value="consumer staples">Consumer staples</option>
<option value="health care">Health Care</option>
<option value="financials">Financials</option>
<option value="information technology">Information Technology</option>
<option value="telecommunication services">Telecommunication services</option>
<option value="utilites">Utilites</option>
<option value="real estate">Real Estate</option>
</select>
Here's is the snippet of code in my .js file that sends data to realtime database
var interested_sector = getInputVal('interested_sector')
function getInputVal(id){
return document.getElementById(id).value;
}
function saveUserInfo( interested_sector){
firebase.database().ref('User_info/'+id).update({
interested_sector: interested_sector,
}).then(() => {
window.location = //it goes to a different html page;
})
}
A firebase RealTime Database is made up of JSON Objects, when you get the Values from the input, make sure they return in proper format, here, you seem to be updating an existing key that is called interested_sector and adding value health, energy etc to it. As Realtime Database accepts JSON, what you send has to be a proper JSON, that is where your code is breaking the value and probably taking the first number, you need to run through all the values taken in and decide in what format do you want to store them?
for example:
{
interested_sector: {
1: 'health',
2: 'energy'
}
}
or
{
interested_sector: "health, energy"
}
as you can see both are working options, but you need to parse the values first before you send them for an update.
So after testing your code, it turns out that interested_sector value changes everything you select a new value, it replaces the old value, that is why when you update the field in firebase database, it only shows the latest of the values,
so for example:
if you select 'Energy' and hit the button to save info, it will save 'Energy'
and then you click on 'Materials' and hit the button to save the info, the interested_sector value gets changed and replaces the old value and the function to save the info changes the firebase value as well.
solution is to add a local var that keeps the value and keeps on appending them interested_sector += new value and use a separator like ',' or ';'.
so the correct code of the above, should be something like this:
<!DOCTYPE html>
<html>
<body>
<select name="Sector" value="sector" id="interested_sector" class="selectpicker" multiple="multiple" data-live-search="true">
<option value="sector">Sector</option>
<option value="energy">Energy</option>
<option value="materials">Materials</option>
<option value="consumer discretionary">Consumer Discretionary</option>
<option value="consumer staples">Consumer staples</option>
<option value="health care">Health Care</option>
<option value="financials">Financials</option>
<option value="information technology">Information Technology</option>
<option value="telecommunication services">Telecommunication services</option>
<option value="utilites">Utilites</option>
<option value="real estate">Real Estate</option>
</select>
<button onclick="getCalled()">Get Called</button>
<script>
var final_val = "";
function getInputVal(id) {
return document.getElementById(id).value;
}
function getCalled() {
var interested_sector = getInputVal('interested_sector');
final_val += interested_sector + ', ';
console.log(final_val);
alert(final_val);
}
</script>
</body>
</html>
FYI: firebase's update function doesn't append to the old value, it changes only the specific fields that you want to change and keeps all the other fields the same. unlike ref().set() function which completely rewrites the entire json object
I'm trying to make a chained dropdown that contain continent, region,country, province,city,district, and village, but i'm stuck at country.
my dropdown require me to use the id from database to chain all the dropdown, so to get the text name i usually using this method :
Country :
<select name="loc_country" class="loc_country loc5" id="loc_country" onchange="javacript: var valor2 = this.options[selectedIndex].text; document.getElementById('loc_country_real').value = valor2;">
<option value="0">-Select-</option>
</select>
<input type="text" id="loc_country_real" name="loc_country_real">
However this method doesn't work this time so i try another approach with :
<select name="loc_country" class="loc_country loc5" id="loc_country">
<option value="0">-Select-</option>
</select>
<input type="text" id="loc_country_real" name="loc_country_real">
and js :
$("#continent").change(function () {
$("#loc_country_real").val($('#loc_country').text());
});
and hoping when my select box with id="continent" changing, the value will update.
And that method also failed because the value given in "loc_country_real" doesn't match with selectbox "loc_country" (e.g.:when i selected europe on the continent selectbox, the loc_country select box will give me a list of european countries but the value in "loc_country_real" will be asian from country)
i need to make the text in "loc_country" and "loc_country_real" match but i have no idea how to do it, please help.
Try this:
Change your select's to have a VALUE matching the text you want E.G:
<select name="loc_country" class="loc_country loc5" id="loc_country">
<option value="0">--Select--</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
You can then use document.getElementById('loc_country').value to get the selected option value
// Change `loc_country_real`'s value to match `loc_country` selected option
document.getElementById('loc_country_real').value = document.getElementById('loc_country').value;
Or the jQuery way:
$('#loc_country').change(function(){
$('#loc_country_real').val($('#loc_country').val());
});
Edit since you mentioned you cannot use value:
$('#loc_country').change(function(){
var textOfSelectedOption = $("#loc_country option:selected").text();
$('#loc_country_real').val(textOfSelectedOption);
});
I want to achieve:
If I select "16" in first select box and bigger value in second, for example "17", then in second select automatically changing to "16".
Just if value in first select box is lower than second, always change to same values, for example 16 to 16, 18 to 18.
<select id="from_age_js" name="from_age" class="select-advertise-style">
<option value="f13">13</option>
<option value="f14">14</option>
<option value="f15">15</option>
<option value="f16">16</option>
<option value="f17">17</option>
<option value="f18" selected>18</option>
<option value="f19">19</option>
<option value="f20">20</option>
</select>
—
<select id="to_age_js" name="to_age" class="select-advertise-style">
<option value="t13">13</option>
<option value="t14">14</option>
<option value="t15">15</option>
<option value="t16">16</option>
<option value="t17">17</option>
<option value="t18">18</option>
<option value="t20" selected>20+</option>
</select>
That's an easy one, in your case, with pure javascript, I would do something like this:
function checkit()
{
//Store the two dropdowns for easy reference
var fromAge = document.getElementById('from_age_js');
var toAge = document.getElementById('to_age_js');
//Verify if the toAge value is minor, to see if the conditional code will be executed
if( fromAge.options[fromAge.selectedIndex].value >
toAge.options[toAge.selectedIndex].value)
{
//In that case, match the values to be the same...
document.getElementById('to_age_js').value =
fromAge.options[fromAge.selectedIndex].value;
}
}
And you just have to add that function to where you want it to be called. I would choose to add the onchange event from Javascript within the select dropdowns. Like this:
<select id="from_age_js" name="from_age" class="select-advertise-style" onchange="checkit();">
You can see a working example here:
https://jsfiddle.net/8cmad3tz/19/
I have a dropdown list in my html file.
I want the location (in the dropdown) to be automatically selected if it is present in the session object if session.
I hope you understand my question. I am new to mvc. Thanks
#if (Session["Location"] == null)
{
<select class="form-control" id="DeliveryLocation" name="DeliveryLocation">
<option value="" selected disabled hidden>Choose Your Location</option>
<option value="Aundh">Aundh</option>
<option value="Baner">Baner</option>
<option value="Balewadi">Balewadi</option>
<option value="Pimpri">Pimpri</option>
<option value="Nilakh">Nilakh</option>
<option value="Wakad">Wakad</option>
</select>
}
else
{
// i want code here to select value from dropdown as it is in location session
<pre> <select class="form-control" id="DeliveryLocation" name="DeliveryLocation">
<option value="" selected disabled hidden>Choose Your Location</option>
<option value="Aundh">Aundh</option>
<option value="Baner">Baner</option>
<option value="Balewadi">Balewadi</option>
<option value="Pimpri">Pimpri</option>
<option value="Nilakh">Nilakh</option>
<option value="Wakad">Wakad</option>
</select>
}
You should use SelectList and MVC's HTML Helpers to build your dropdown. It looks daunting if you're new to MVC, but it simplifies a lot of stuff for you.
In your current action method that loads this page:
ViewBag.DeliveryLocation = new SelectList(new[]
{
new { Text = "Aundh", Value = "Aundh" },
new { Text = "Balewadi", Value = "Balewadi" },
new { Text = "Pimpri", Value = "Pimpri" }
}, "Value", "Text", Session["Location"]);
There are a bunch of overloads for the SelectList class. So the above code creates a SelectList with the collection where Value property will be bound to option's value attribute and Text will be displayed as the option's text. The next parameter is selectedValue. In your case, you'd want to set to whatever is there in the Session["Location"].
You can also create a list of SelectListItem and put it in a ViewBag.
And then in your view,
#Html.DropDownList("DeliveryLocation")
That's it. So what happens here is, Razor generates a <select> element with name="DeliveryLocation". Then it looks for a DeliveryLocation property in the ViewBag. WE have set this in our controller and the options will be set accordingly.
Let's say, you have set ViewBag.DeliveryLocationList in your controller with the SelectList. Then you'd have to tell razor where to look for a SelectList. And since ViewBag is a dynamic object, you'd have to cast it.
#Html.DropDownList("DeliveryLocation", (IEnumerable<SelectListItem>)ViewBag.DeliveryLocationList, "Choose Your Location", new { #id= "DeliveryLocation" })
Here you have hardcoded the locations. In real applications, the option values like Locations will usually be fetched from the database. Then you don't have to make big changes if you use HTML helpers.
This link from Microsft docs has some great examples for beginners
100% work in your situation.
<select class="form-control" id="DeliveryLocation" name="DeliveryLocation">
<option #(Session["location"] == null ? "selected disabled hidden": "")>Choose location</option>
<option #((string)Session["location"] == "USA" ? "selected" : "")>USA</option>
<option #((string)Session["location"] == "Praga" ? "selected" : "")>Praga</option>
<option #((string)Session["location"] == "Paris" ? "selected" : "")>Paris</option>
<option #((string)Session["location"] == "China" ? "selected" : "")>China</option>
<option #((string)Session["location"]== "GB" ? "selected":"")>GB</option>
</select>
I have a select box which more or less looks like this :
<select id="select_experience">
<option value="1,2">1-2</option>
<option value="3,4">3-4</option>
<option value="5,6,7,8,9">5-9</option>
<option value="10,11,12,13,14,15">10-15</option>
<option value="15+">15+</option>
</select>
This is a search filter, so that if I select an option out of this, it will create a condition for querying. I have a column in mysql which shows tutor experiences :
tutorid | experience
1 | 5
2 | 1
3 | 10
4 | 3
My current query looks like this:
$query_tutors = $this->db->get_where("tutor_info", array("tutor_id" => $id, "I need to add that selectbox selected option here."));
My question is :
Where will I do the explode thing? and how will I check for 15+ in that query?
Lets assume you stored select_experience input to $id variable.
You can use following code
$this->db->from('tutor_info');
if (strpos($id,'+') !== false)//if 15+
{
$ranges=explode('+',$id);//get the integer value.You may need to check more to make sure it is intger
$this->db->where('tutorid >=',$ranges[0]);//only >=15
}
else if (strpos($id,'-') !== false)//if range like 5-9
{
$ranges=explode('-',$id);
$this->db->where('tutorid >=',$ranges[0]);//>=5
$this->db->where('tutorid <=',$ranges[1]);//<=9
}
$query_tutors=$this->db->get();
Note
This answer is for your first revision where values was like 1-2,3-4,5-9..
in your model, get the selected option
$experience_level = $this->input->post("select_experience");
This will work only if change the html like this
<select name="select_experience" id="select_experience">
<option value="1,2">1-2</option>
<option value="3,4">3-4</option>
<option value="5,6,7,8,9">5-9</option>
<option value="10,11,12,13,14,15">10-15</option>
<option value="15+">15+</option>
</select>
If not you can either submit the value by Ajax...
Any way get the selected option value to $experience_level
Then do condition check like this
if($experience_level !='15+'){
$this->db->where_in("experience", explode(",", $experience_level);
}else{
$this->db->where("experience >", 15);
}