I have tried the following code to load second drop down based on first drop down and it works fine. But the second drop down not clearing its content while I am selecting first drop down second time. It is appending values.
Also the value of option of the second drop down should be "json_data[i].value". But for me it is "json_data[i].text"
Here is the code that I have used in the click of first drop down.
$.ajax({
url: "http://foo.bar/data.json",
type: "POST",
data: {
article: produkt,
color: farbe,
size: groesse,
form: typ
}
}).done(function (data) {
var json_data = $.parseJSON(data.responseText.trim());
for(var i=0;i<json_data.length;i++) {
json_data[i].text = json_data[i].NAME;
json_data[i].value = json_data[i].VALUE;
oHandler2.add(json_data[i]);//adding
}
oHandler2.showRows(json_data.length);
});
Below is my html part,
<span class="field_outer">
<label>Main Category</label>
<div class="filter">
<select id="main_category" name="main_category" class="ddTitle select" onchange="">
<option value="0" selected>Select a main category</option>
<option value="1">category1</option>
<option value="2">category2</option>
</select>
</div>
</span><!-- /.field_outer -->
<span class="field_outer">
<label>Sub Category</label>
<div class="filter">
<select id="sub_category" name="sub_category" class="select" onchange="">
<option value="0" selected>Select a sub category</option>
</select>
</div>
</span>
Please help; Thanks in advance :-)
destroy - Restore the original dorpdown.
var oDropdown = $("#element").msDropdown().data("dd");
oDropdown.destroy()
refresh - Refresh the msdropdown UI and value based on original dropdown.
var oDropdown = $("#element").msDropdown().data("dd");
oDropdown.refresh(); //or
document.getElmentById("element").refresh();
For details check -
http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html
Related
I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.
<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz
You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.
You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.
what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}
I have been wrecking my brain trying to get around this issue. I'm having trouble where a Select dropdown list is not being populated with the results returned based on a previous selection.
The relevant HTML code is as follow:
<div class="widget property_search">
<form action="https://www.agentsforbidden.co.za/" id="searchproperty" name="searchproperty" method="get">
<div class="search_frm_left clearfix">
<div class="form_row clearfix advt-ptype">
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Sale" value="Sale" checked= checked><label for="property_type_Sale"> Sale</label></span>
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Rent" value="Rent"><label for="property_type_Rent"> Rent</label></span>
</div> <div class="form_row">
<label>Keyword</label>
<input type="text" value="" name="s" id="search_near-1135114534" class="searchpost" placeholder="" />
</div>
<div class="form_row clearfix">
<label>Province</label> <div class="selectbox">
<select name="adv_zone" id="adv_zone" class="adv_zone">
<option value="">Select province</option>
<option value="5">Eastern Cape</option>
<option value="3">Free State</option>
<option value="6">Gauteng</option>
<option value="2">KwaZulu-Natal</option>
<option value="9">Limpopo</option>
<option value="7">Mpumalanga</option>
<option value="10">North West</option>
<option value="8">Northern Cape</option>
<option value="11">Western Cape</option>
</select>
</div>
</div>
<div class="form_row clearfix">
<label>City</label> <div class="selectbox">
<select name="adv_city" id="adv_city" class="adv_city">
<option value="">Select City</option>
</select>
</div>
</div>
The problem is that when I select the Province that the City drop down list is not getting populated. When I inspect the POST and return values with FireBug I can see that I am getting the response that is required (All the options for the dropdown) however it just simply doesn't get populated.
Here's the relevant jQuery Ajax bit:
jQuery(".adv_zone").live("change", function () {
var e = jQuery(this),
t = e.parents(".form_front_style").find(".adv_city"),
i = jQuery(this).val();
jQuery.ajax({
url: ajaxUrl,
type: "POST",
data: "action=fill_city_cmb&state_id=" + i,
success: function (e) {
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
else {
var i = t.find("option").first();
t.next("span.select").text(i.text())
}
}
})
})
And lastly the response (truncated due to already long post):
<option value="">Select City</option><option value="5651">Akasia</option><option value="5652" >Alberton</option><option value="5653">Albertynsville</option><option value="5654" >Alexandra</option><option value="12694" >Alphen Park</option><option value="5655">Alrapark</option><option value="5656">Alrode</option><option value="5657">Althea</option>
When the ajax is fired I can see that the following part is true and is executed:
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
I would GREATLY appreciate any insight as to why this is not working as expected.
I have a form with the following dropdown selection menu in HTML:
<div class="input-field col s4">
<select id="disposition" required>
<option value="No_Sale" id="noSale">No Sale</option>
<option value="Sale" id="yeahSale">Sale</option>
<option value="Unreachable" id="noContact">Unreachable</option>
<option value="Call_Back" id="callBack">Call Back</option>
</select>
<label>Disposition</label>
</div>
The above snippet for dispositions should affect whether or not other form elements are disabled. However, I cannot seem to get the value to change on user input.
Here is the javascript with jQuery:
$(document).on('change', 'select', function(){
console.log(disposition);
console.log($("#yeahSale").selected == true);
if ($("#yeahSale").selected == true) {
$("#fund").removeAttr('disabled');
}
});
For both $("#disposition").val() and $("#yeahSale").selected, the console.log returns
"No_Sale"
and false when I click on the form element and select
"Sale."
The first thing I tried was:
if (disposition == "Sale")
I have also tried:
var disposition = $("#disposition").find(":selected").text();
I've been searching stack exchange and google for answers for almost an hour but I haven't any success so far. My apologies if I just completely missed an extant question that's already been solved.
Thanks for your help!
$("#disposition").val() gives you the value of selected option.
So you simply want to put condition according to the value you got selected.
$(document).on('change', '#disposition', function(){
/*
If you want to put condition based on
option with specific id is selected or not then
if($("#yeahSale").is(':selected')) {
}
*/
if ($("#disposition").val() == 'Sale') {
// Do here what you want to do
// $("#fund").removeAttr('disabled');
console.log("Sale Selected");
} else {
console.log("Selected Option is: "+ $("#disposition").val());
}
//Get Id attr of selected option
console.log("Id of selected option is: " + $(this).find('option:selected').attr('id'));
// Check weather option with specific Id is selected or not:
console.log($("#yeahSale").is(':selected'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s4">
<select id="disposition" required>
<option value="No_Sale" id="noSale">No Sale</option>
<option value="Sale" id="yeahSale">Sale</option>
<option value="Unreachable" id="noContact">Unreachable</option>
<option value="Call_Back" id="callBack">Call Back</option>
</select>
<label>Disposition</label>
</div>
If you want to get id attribute of selected option you can use this
$(this).find('option:selected').attr('id')
If you want to see option with ID yeahSale is selected or not than try this:
$("#yeahSale").is(':selected')
<div class="input-field col s4">
<select id="disposition">
<option value="No_Sale">No Sale</option>
<option value="Sale">Sale</option>
<option value="Unreachable">Unreachable</option>
<option value="Call_Back">Call Back</option>
</select>
<label>Disposition</label>
</div>
<script>
$(document).on('change', function(){
alert($("#disposition").val());
console.log($("#yeahSale").selected == true);
if ($("#yeahSale").selected == true) {
$("#fund").removeAttr('disabled');
}
});
tested and found it working
var disposition = $('#disposition').val();
$('#disposition').change(function() {
disposition = $(this).val();
console.log(disposition);
}
All you need is disposition.value and an onchange event.
The script below will acknowledge user input and return the updated disposition.value whenever a new selection is made:
var disposition = document.getElementById('disposition');
disposition.addEventListener('change', function(){console.log(disposition.value);}, false);
<select id="disposition" required>
<option value="No_Sale">No Sale</option>
<option value="Sale">Sale</option>
<option value="Unreachable">Unreachable</option>
<option value="Call_Back">Call Back</option>
</select>
I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html
I have two different select elements in a form
When I select an option in the first list, I want a corresponding option to be automatically set in the second list. I have made a few attempts, and I am close to getting it working using reactive-var but I need some help.
My template looks like this
<template name="inputForm">
<div class="section">
<form action="#">
<div class="row">
<div class="input-field col m4">
<select id="list-one">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
<label>Select List 1</label>
</div>
{{{secondListVar}}}
</div>
</form>
</div>
</template>
Then in the template helper file I have
var secondListVar = new ReactiveVar("<div class='input-field col m4'><select id='list-two'><option value='' selected>Choose your option</option></select><label>Select List 2</label></div>");
Template.inputForm.helpers({
secondListVar: function() {
return secondListVar.get();
}
});
Template.inputForm.events({
'change #list-one' : function() {
var listOneChoice = $('#list-one option:selected').text();
switch (listOneChoice) {
case "100":
secondListVar.set("<div class='input-field col m4'><select id='list-two'><option value='' selected>1.5</option></select><label>Select List 2</label></div>");
break;
case "75":
break;
case "50":
break;
case "25":
break;
case "25":
break;
}
}
});
If I select an option from the 1st list, the 2nd list seems to get cleared
but then if I click a radio button that causes the template to be hidden/shown I get this
So I have two issues
The rendering doesn't seem to be dynamic, in that I need to manually force it
When I get the 2nd list option shown, the corresponding state of the 1st list is lost
I would suggest creating the second list as html, and set its selection inside an autorun if you want to use a ReactiveVar.
Here's a working example :
http://meteorpad.com/pad/JLkM8ftKQuKhBvF3r/Lists
<template name="Main">
<label>Select List 1</label>
<select id="list-one">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
<label>Select List 2</label>
<select id="list-two">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
</template>
var SelectedItem = new ReactiveVar();
Template.Main.events({
'change #list-one' : function() {
var selected = $('#list-one option:selected').val();
SelectedItem.set(selected);
}
});
Template.Main.onCreated(function(){
this.autorun(function(){
var selected = SelectedItem.get();
$('#list-two option').eq(selected).prop('selected', true);
});
})
However, you may not even need a ReactiveVar, in this case you can set the second list directly via jquery if you wanted.
#looshi answer is the correct one, but I was also encountering issues due to the materialize package which are now sorted in my meteorpad example in light of the workaround posted here
I'm having a similar problem using Materialize. Your form select dropdowns are being created by Materialize based on values when the page is originally rendered. You will need to rerun the initialization code each time:
$('select').material_select();
Here's an example based on taking values from iron routers data function:
Tracker.autorun(function(e){
var data = Router.current().data();
Tracker.afterFlush(function(){
//dom is now created.
$('select').material_select();
});
});