I am seeking assistance again for my problem. This is just a continuation of my conditional dropdownlist.
<select name="dropdownmain" id="" title="">
<option value="dropdownmain1">dropdownmain1</option>
<option value="dropdownmain2">dropdownmain2</option>
<option value="dropdownmain3">dropdownmain3</option>
<option value="dropdownmain4">dropdownmain4</option>
</select>
//if selected dropdownmain1 this dropdown will display
<select name="dropdownmain1" id="" title="">
<option value="dropdownmain1-submenu1">dropdownmain1-submenu1</option>
<option value="dropdownmain1-submenu2">dropdownmain1-submenu2</option>
<option value="dropdownmain1-submenu3">dropdownmain1-submenu3</option>
<option value="dropdownmain1-submenu4">dropdownmain1-submenu4</option>
</select>
//if selected dropdownmain2 this dropdown will display
<select name="dropdownmain2" id="" title="">
<option value="dropdownmain2-submenu1">dropdownmain2-submenu1</option>
<option value="dropdownmain2-submenu2">dropdownmain2-submenu2</option>
<option value="dropdownmain2-submenu3">dropdownmain2-submenu3</option>
<option value="dropdownmain2-submenu4">dropdownmain2-submenu4</option>
</select>
//if selected dropdownmain3 this dropdown will display
<select name="dropdownmain3" id="" title="">
<option value="dropdownmain3-submenu1">dropdownmain3-submenu1</option>
<option value="dropdownmain3-submenu2">dropdownmain3-submenu2</option>
<option value="dropdownmain3-submenu3">dropdownmain3-submenu3</option>
<option value="dropdownmain3-submenu4">dropdownmain3-submenu4</option>
</select>
//if selected dropdownmain4 this dropdown will display
<select name="dropdownmain4" id="" title="">
<option value="dropdownmain4-submenu1">dropdownmain4-submenu1</option>
<option value="dropdownmain4-submenu2">dropdownmain4-submenu2</option>
<option value="dropdownmain4-submenu3">dropdownmain4-submenu3</option>
<option value="dropdownmain4-submenu4">dropdownmain4-submenu4</option>
</select>
**im using this js code**
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('select[name!="dropdownmain"]').hide();
$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show();
$('select[name="dropdownmain"]').change(function(){
$('select[name!="dropdownmain"]').hide();
$('select[name="' + $(this).val() + '"]').show();
});
});//]]>
</script>
How will I get the value of the selected dropdownlist when a button is clicked?
Give the submenus a common class name!, and give the main select an ID as well!
jQuery code can be reduced to:
$('#dropdownmain').change(function() {
$('.submenu').hide();
$('.submenu[name="' + $(this).val() + '"]').show();
});
http://jsfiddle.net/samliew/jKUBb/
Then to get the value of selected submenu item:
$('.submenu').change(function() {
alert($(this).val());
});
Something like this maybe (if I understood what you want):
$("#button").click(function() {
var selected = $('select[name="dropdownmain"]').val();
alert($('select[name="' + selected + '"]').val());
});
$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').val()
Use:
var e = document.getElementsByName("dropdownmain")[0];
var strUser = e.options[e.selectedIndex].value;
If you want to get all values from currently displayed select :
$("select:visible").each(function() {
console.log( $(this).attr('name') + " have value : " + $(this).val() );
});
Here is a working example : http://jsfiddle.net/GAe7D/1/
Related
I'd like to concatenate several values from selects and input fields on a final input field that contain all the values.
What I have until now is this:
$('#chosen_a').change(function() {
$('#ddlNames').val($('#chosen_a option:selected').data('id'));
console.log($('#chosen_a option:selected').data('id'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- First select -</option>
<option value="AAA" data-id="AAA">AAA</option>
<option value="BBB" data-id="BBB">BBB</option>
<option value="CCC" data-id="CCC">CCC</option>
<option value="DDD" data-id="DDD">DDD</option>
<option value="EEE" data-id="EEE">EEE</option>
</select>
<input id="Something1" placeholder="Write something"></input><br/>
<select name="criteria_title" id="chosen_b" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- Second select -</option>
<option value="FFF" data-id="FFF">FFF</option>
<option value="GGG" data-id="GGG">GGG</option>
<option value="HHH" data-id="HHH">HHH</option>
<option value="III" data-id="III">III</option>
<option value="JJJ" data-id="JJJ">JJJ</option>
</select>
<input id="Something2" placeholder="Write something else"></input><br/>
<br><br>
<input maxlength="2600" name="ddlNames" id="ddlNames" onKeyUp="countChar(this)" placeholder="Blocco Note"></input><br/>
In effect, I can get the first select option to the input field, but I do not know how to add the rest.
If I understand you well ...
Add a class 'getValues' to all inputs & selects that you want to get the values and create an event on JQuery onChange so when something will change it will auto-join it in that #ddlNames input.
$('.getValues').change(function() {
var values = [];
$('.getValues').each(function() {
values.push($(this).val());
});
$('#ddlNames').val(values.join(', '));
})
Try this:
const onChange = () => {
const value = $('#chosen_a option:selected').val() + ' '
+ $('#Something1').val() + ' '
+ $('#chosen_b option:selected').val() + ' '
+ $('#Something2').val();
$('#ddlNames').val(value);
}
$('select').change(onChange);
$('input').keydown(onChange);
I want to remove elements in a dropdown, the example of the HTML code is below and I need to select elements by div class "woo-vpf-field-make" then select the name "make" and then option value "73483".
I hope that makes sense :)
<div class="woo-vpf-field-make">
<select name="make">
<option value="">Select Make</option>
<option value="70281">BMW</option>
<option value="73483">Fiat</option>
<option value="73923">Ford</option>
<option value="71367">Mini</option>
<option value="75988">Opel / Vauxhall</option>
<option value="74715">Volkswagen</option>
</select>
</div>
Below is the JavaScript code that I wrote, but seems like it could be lot better :)
$(document).ready(function() {
$('select[name^="make"]').children("option[value^=" + "73483" + "]").remove();
$('select[name^="make"]').children("option[value^=" + "73923" + "]").remove();
$('select[name^="make"]').children("option[value^=" + "75988" + "]").remove();
$('select[name^="make"]').children("option[value^=" + "74715" + "]").remove();
})
You could add option value in array .And remove the element using forEach based on array value
var r_arr = ["73483", "73923", "75988", "74715"];
$(document).ready(function() {
r_arr.forEach(function(value) {
$('select[name^="make"]').find("option[value^=" +value+ "]").remove();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woo-vpf-field-make">
<select name="make">
<option value="">Select Make</option>
<option value="70281">BMW</option>
<option value="73483">Fiat</option>
<option value="73923">Ford</option>
<option value="71367">Mini</option>
<option value="75988">Opel / Vauxhall</option>
<option value="74715">Volkswagen</option>
</select>
</div>
Assign an id to your dropdown
$("#select_id option[value='73483']").remove();
Just use the find() function to search your value that remove it
$('select[name^="make"]').find("option[value^=" +value+ "]").remove();
or You can assign a Id to your select than it will be more easy to find
$("#id option[value=" +value+ "]").remove();
I am using the following js and html code to display the lists.
MAIN PROBLEM is that when the sub-categories & categories become to many, the categories change but the sub-categries are not displaying from a certain cagory going downwards. Problem is on desktop/laptops. Working correctly on mobile device. Am not god at javascript
<script type="text/javascript">
$(function() {
$('#vehicle').on('change', function() {
var vehileType = $('#vehicle').val();
$('#vehicle-type option').hide();
$('#vehicle-type option[vehicle="'+vehileType+'"]').show();
});
});
</script>
<select id="vehicle" required name="brand">
<option value="">Select Make</option>
<option value="ABT">ABT</option>
<option value="AC">AC</option>
</select>
<select name="model" id="vehicle-type" class="form-control">
<option vehicle="ABT" value="ABT">ABT</option>
<option vehicle="ABT" value="ABT1">ABT1</option>
<option vehicle="AC" value="AC">AC</option>
<option vehicle="AC" value="AC1">AC1</option>
</select>
First I put vehicle options to custom variable var vehicleTypeOptions = $('#vehicle-type option[vehicle="' + vehileType + '"]');
Then after show I add this $('#vehicle-type').val(vehicleTypeOptions.first().val()); so it will set the value of first vehicle type option
I also put .trigger('change') for a #vehicle so it will set vehicle types by the vehicle make so you don't have to manually set one option
Here is a working demo:
$(function() {
$('#vehicle').on('change', function() {
var vehileType = $('#vehicle').val();
var vehicleTypeOptions = $('#vehicle-type option[vehicle="' + vehileType + '"]');
$('#vehicle-type option').not(vehicleTypeOptions).hide();
vehicleTypeOptions.show();
$('#vehicle-type').val(
vehicleTypeOptions.first().val()
);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="vehicle" required name="brand">
<option value="">Select Make</option>
<option value="ABT">ABT</option>
<option value="AC">AC</option>
</select>
<select name="model" id="vehicle-type" class="form-control">
<option vehicle="ABT" value="ABT">ABT</option>
<option vehicle="ABT" value="ABT1">ABT1</option>
<option vehicle="AC" value="AC">AC</option>
<option vehicle="AC" value="AC1">AC1</option>
</select>
Problem with multiselect: I am having a need of selecting default options in a multiselect dropdown. Here I am working with Struts2 and default options are coming from server.
Struts Code:
<select multiple >
<s:iterator var="user" value="%{USERS}">
<option <s:if test="%{#approvalStep.isUserSelected(#user.userId) == true}"> selected="selected" </s:if> value="<s:property value="#user.userId"/>" > <s:property value="#user.userName"/></option>
</s:iterator>
</select>
Result of Struts Code:
<div id="selectAndRemoveUser">
<select multiple="">
<option selected="selected" value="2000000002007"> aftabalamm7861111111</option>
<option selected="selected" value="2000000003015"> aftabalam.m+12</option>
<option selected="selected" value="2000000003011"> Aftab</option>
<option selected="selected" value="2000000026353"> aftabalam.m+approver1</option>
</select>
</div>
Problem:
When I am trying to get the selected option using Jquery It's only returning the first option. And if I manually edit the select > option elements (I mean re-write the selected=selected using browser inspect element) it's work fine.
Jquery Code:
console.log($("#selectAndRemoveUser").find('select :selected').length); // the result is 1;
if($("#selectAndRemoveUser").find('select :selected').length > 1 ) {
alert('false');
} else {
alert('true');
}
For multiselect dropdown, the name of the select field should be defined as array i.e add 'name[]' at the end of the name attribute.
**HTML** :
<div id="selectAndRemoveUser">
<select multiple="" name = "user[]">
<option value="2000000002007"> aftabalamm7861111111</option>
<option value="2000000003015"> aftabalam.m+12</option>
<option value="2000000003011"> Aftab</option>
<option value="2000000026353"> aftabalam.m+approver1</option>
</select>
</div>
**Jquery** :
$("select")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).text() + " ";
});
console.log(str);
})
.trigger("change");
I have one issue.I want to set value in drop down by onchange event using javascript/Jquery. I am explaining my code below.
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue();">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
function SetValue(){
var value=document.getElementById('leaveCode').value;
var name=document.getElementById('leaveCode').name;
document.getElementById('leaveCode1').value=value;
document.getElementById('leaveCode1').name=name;
}
Here my requirement is when user will select any value from 1st drop down list it will display also in second dropdown list in disable mode.Please help me.
You can use following statement that will append and make select in leavecode1 dropdown.Use following statements in your js file
jQuery('#leaveCode').change(function(){
//get selected text from #leaveCode list
text = jQuery("#leaveCode option:selected").text();
//get selected value for selected text
value = jQuery("#leaveCode option:selected").val();
//append new in #leavecode1 and make this option as selected option.
jQuery("#leaveCode1").append("<option value=" + value + " selected>" + text + "</option>");
});
You can check this using following link(updated)-http://jsfiddle.net/aecrcvt2/2/
The best way is to Append the new value in your dropdownlist on change the leaveCode dropdownlist
$("#leaveCode").change(function(){
$("#leaveCode1").append("<option value=" + $("#leaveCode").val() + ">" + $("#leaveCode option:selected").text() + "</option>")
});
I believe this is the answer you need:
$("#leaveCode").change(function(){
var selectedOptionValue = $(this).find(":selected").val();
var selectedOptionText = $(this).find(":selected").text();
var newOption = '<option value='+selectedOptionValue+' disabled>'+selectedOptionText+'</option>';
$("#leaveCode1 option").last().after(newOption);
});
JSFIDDLE
function SetValue(obj) {
var $this = $(obj);
var val = $this.val();
var txt = $('option:selected', $this).text();
$('#leaveCode1').append($('<option></option>').val(val).html(txt));
$('#leaveCode1').val(val).prop('disabled', 'disabled');
}
SetValue('#leaveCode');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue(this);">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>