Merge select box selects values - javascript

I have 3 select boxes and one input.
I need to merge the selected values together and add it to the hidden input box.
For example:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
</select>
Finally I want to get:
Is this case the value would be:
1-5-2011
How could I get this functionality togehter please?

JSFiddle Demo:
one way to do it is:
HTML:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
<option value="2-">2</option>
<option value="3-">3</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
<option value="6-">6</option>
<option value="7-">7</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<input type='hidden' id='myhidden' value='' />
JavaScript:
<script type='text/javascript'>
$(document).ready(function() {
$('select').each(function() {
$(this).change(function() {
var myele = '';
$.each($('select option:selected'), function() {
myele += $(this).val();
});
$('#myhidden').val(myele);
console.log($('#myhidden').val());
});
});
});
</script>
Modified w/ onchange.

If you want the code to be flexible enough to work with an arbitrary number of <select> elements, you can write something like:
$("#yourInputBoxId").val($("[id^=select-choice-]").map(function() {
return $(this).val();
}).get().join(""));
Here, map() will project into an array the selected values of all the <select> elements whose id attributes begin with select-choice-. The array items are then concatenated into a string, without a separator (since the values already contain one).

$( "#id_of_hidden_input" ).val(
$( "#select-choice-1" ).val() +
$( "#select-choice-2" ).val() +
$( "#select-choice-3" ).val()
);

you get always use php by POST or get
change the names
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-2" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-3" id="select-choice-3">
<option value="2011">2011</option>
</select>
$choice1 = $_POST['select-choice-1'];
$choice2 = $_POST['select-choice-2'];
$choice3 = $_POST['select-choice-3'];
echo $choice ."-".$choice2 ."-".$choice3;

You'll want to use the selectedIndex and options properties of the select element. Here is a quick example:
var elm1 = document.getElementById("select-choice-1"),
elm2 = document.getElementById("select-choice-2"),
elm3 = document.getElementById("select-choice-3"),
sel1 = elm1.options[elm1.selectedIndex].value,
sel2 = elm2.options[elm2.selectedIndex].value,
sel3 = elm3.options[elm3.selectedIndex].value;
alert( sel1 + sel2 + sel3);

var $selects = $('#select_box_1,#select_box_2,#select_box_3');
var seperator = '-';
$selects.change(function() {
var val = [];
$selects.each(function() {
val.push($(this).val());
});
$('#hidden_input').val(val.join(seperator));
}).trigger('change');
This allows for any number of selectbox values to be concatinated with a seperator of your choice.
The .trigger('change); causes the bound .change(...) event to fire and concatinate the values on page load (just in case the form ha been submitted and the selectboxes prefilled)

Related

How to select multiple options if check option from a different select?

I want select multiple option from second select depending on check option from first select.
For example:
adiunkt -> mikroklimat, RTG
agent celny -> zapylenie
First select:
<select name="form[stanowisko][]" id="stanowisko">
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
Second select:
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat">mikroklimat</option>
<option value="RTG">RTG</option>
<option value="zapylenie">zapylenie</option>
</select>
I tried this but it not working (select all options after first check):
function tes(){
if (document.getElementById('stanowisko').value ="agent celny") {
document.getElementById('czynniki_szkodliwe').options[2].selected = true;
document.getElementById('czynniki_szkodliwe').options[0].selected = true;
}
if ( document.getElementById('stanowisko').value="adiunkt") {
document.getElementById('czynniki_szkodliwe').options[1].selected = true;
}
}
Pure js solution.
let elem1 = document.getElementById('stanowisko'),
elem2 = document.getElementById('czynniki_szkodliwe');
elem1.addEventListener('change', (e) => {
Array.from(elem2.children).forEach(v => {
return v.disabled = v.getAttribute('data-attr') !== e.target.value;
})
});
<select name="form[stanowisko][]" id="stanowisko">
<option value="">-</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat" disabled data-attr='adiunkt'>mikroklimat</option>
<option value="RTG" disabled data-attr='adiunkt'>RTG</option>
<option value="zapylenie" disabled data-attr='agent celny'>zapylenie</option>
</select>
You should use a data attribute to mark the options linked to the first select like this:
$(document).ready(function(){
$("#stanowisko").on("change", function(event){
var $options = $("#czynniki_szkodliwe option");
//Unselect all
$options.prop("selected", false);
var val = $("#stanowisko").val();
$options.each(function(idx, item) {
if($(item).data("stanowisko").indexOf(val) >= 0) {
$(item).prop("selected", true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="form[stanowisko][]" id="stanowisko">
<option value="">Choose</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
<option vlaue="lekarz">lekarz</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option data-stanowisko='["adiunkt"]' value="mikroklimat">mikroklimat</option>
<option data-stanowisko='["adiunkt","lekarz"]' value="RTG">RTG</option>
<option data-stanowisko='["agent celny"]' value="zapylenie">zapylenie</option>
</select>
Edit: If several options, from the first select, refers to the same options in the second select, you can "store" an array in the data attribute in JSON format.
I updated the JS code to handle JSON array in the data attributes instead of a simple string.

Get the name of all selected items from select multiple="multiple" options dropdown

I am trying to get the name of all selected items from select multiple="multiple" options dropdown.
In my html page, I have the following code snippet:
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
In my JS file, I have the following code snippet:
var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];
However, the variable categoryNameArray only gives me the array of the selected items, what I want is the name of the selected items. Can someone tell me a way how I can make this work? Thanks!
Since val isn't giving you what you want, I'm going to assume you want an array of the text of the selected items.
You can get that like this:
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
That finds all the selected items, then uses map to get the text of each of them (wrapped in a jQuery object), then uses get to turn that jQuery object into an array.
You can probably use return this.text; rather than return $(this).text();, since HTMLOptionElement has a text property (which most elements don't), but I'd be sure to test with my target browsers to be sure.
Example:
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example with this.text instead of $(this).text():
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return this.text;
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
val() returns the values on the selected options, in your case 1, 2 .... You should use text() to get the names of the selected options. You can loop through all selected options using each() method and get the selected values using text():
$('a').on('click', function(e) {
e.preventDefault();
$('#ddlCategory option:selected').each(function(i, selected) {
console.log($(selected).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
Send
You can read more on how val() works here.
You can read more on how text() works here.
Try this:
var categoryNameArray =
$('#ddlCategory option:selected').map(function(){
return this.text;
}).get();
console.log("category = " + categoryNameArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option selected="selected" value="2">Restaurant</option>
<option value="3">Coffee Shop</option>
<option value="4">Hotels</option>
</select>
Easy way to get all selected value is $('#ddlCategory').val();

Disable drop down options based on selected value with jquery

I am having a drop down list contains values like fb-test, fb-testing, tw-test, tw-testing as follows. I am trying to disable the options in the following way.
When the user select fb-test from the drop down, the fb-testing should disable.
When the user select tw-testing or tw-test, the option contains 'tw' should disable.
This is the HTML mark-up I am using:
<select id="wpri-profile">
<option value="0">--Select--</option>
<option value="fb-test">fb-test</option>
<option value="fb-testing">fb-testing</option>
<option value="tw-test">tw-test</option>
<option value="tw-testing">tw-testing</option>
</select>
This is the code I am trying:
$('#wpri-profile').on('change',function(){
$(this).find('option').prop('disabled',false);
var val = $(this).val();
var prof = val.split("-");
alert(prof[0]);
$(this).find('option[value="'+prof[0]+'"]').prop('disabled',true);
});
Use the value starting with selector ^:
$('#wpri-profile').on('change',function(){
$(this).find('option').prop('disabled',false);
var val = $(this).val();
var prof = val.split("-");
// starting with selector shall do it
$(this).find('option[value^="'+prof[0]+'"]').prop('disabled',true);
});
Try this one and working as you expect,
$('#wpri-profile').on('change',function(){
$(this).find('option').prop('disabled',false);
var val = $(this).val();
var prof = val.split("-");
//alert(prof[0]);
$(this).find('option[value*='+prof[0]+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="wpri-profile">
<option value="0">--Select--</option>
<option value="fb-test">fb-test</option>
<option value="fb-testing">fb-testing</option>
<option value="tw-test">tw-test</option>
<option value="tw-testing">tw-testing</option>
</select>
Updated
input[value *=tw] it will match out all the value starting with tw
$('#wpri-profile').on('change',function(){
$(this).find('option').prop('disabled',false);
var val = $(this).val();
var prof = val.split("-");
alert(prof[0]);
$(this).find('option[value *='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="wpri-profile">
<option value="0">--Select--</option>
<option value="fb-test">fb-test</option>
<option value="fb-testing">fb-testing</option>
<option value="tw-test">tw-test</option>
<option value="tw-testing">tw-testing</option>
</select>

remove selected value from select box using jquery but It's need to display current selected value in select box?

I have a select box and add more button. when I click add more button it's creating another select using clone.In first select box I select one option value from select box means that value should be removed from next created select box.At the same time which selected value in select box that current value shown on current select box. Select box value is being loaded dynamically.
Eg:
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
Is it what you're looking for ?
I would recommend you to play and manipulate with index(), that won't bother your dynamic values.
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
$('button').click(function(){
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value="">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Clone</button>
You can try like this.
$("#yourId").val(" ")//if your value has white spec else use like below line
$("#YourId").val("")//What ever you want to be selected, place your value in .val()
I hope this will help you, if you need anything please ask!
$("button").on("click", function() {
$("#section_1")
.clone()
.attr("id", "section_2")
.on("change", function() {
var sec2Val = $(this).val();
var delOption = $("#section_1 > option[value=" + sec2Val + "]").detach();
optionHolder.push(delOption);
})
.insertAfter($("#section_1"));
$(this).attr("disabled", "disabled");
});
var optionHolder = [];
$("#section_1").on("change", function() {
var sec1Val = $(this).val();
if ($("#section_2")) {
var delOption = $("#section_2 > option[value=" + sec1Val + "]").detach();
optionHolder.push(delOption);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Add more</button>

Change DIV id with javascript

Trying to change the div id="test" to the value from the dropdown option selected using javascript. I have a jsfiddle started. If user selects 2013 then the div id="test" should change to div id="2013" and show the second dropdown of months. The value from the year dropdown will ultimately be used to query the database for the actual months recorded in that year but for now I'm interested in changing the div id and storing the value for later use.
<div class="report_select" id="style_container_div">
<label>Year:</label>
<select size="1" id="year" title="" type="select" name="style">
<option value="">Select Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="test" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Select a Month:</label>
<select>
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
<script type="text/javascript">
$("#year").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID);
$('#' + targID).show ();
} )
</script>
Note that you use jQuery instead of document.getElementById("id") you can do simply $("#id"), and instead of .setAttribute you can do .attr('attr', 'attrVal').
Because the id of $("#test") will be changed a solution would be to change the id of select parent.
// on change
var $this = $(this);
$this.parent().attr("id", $this.val());
But instead of changing the id, I recommend you to use a data-attr.
<div id="test" data-value="test">...</div>
And then to set it:
$("#test").attr("data-value", $this.val());
targID there is no variable in this method.
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID); // error
$('#' + targID).show ();
});
from your code, it seems you're already using using jQuery therefore try it in
$('#test').prop("id","yourId");
I updated your JsFiddle. I changed your Javascript to reflect the following:
$("select#year").on('change', function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
$("select#year").on('change', function () {
var tarID = $(this).val();
$('#test').attr('id', tarID); // document.getElementById("test").setAttribute("id", targID);
$("div.style-sub-2").hide ();
$('#' + tarID).show ();
} )
However, this will not change the ID of test after it's changed. You'll have to create a function to keep track of this but it shouldn't be too difficult.
If you really want the pure JavaScript option:
document.getElementById("test").id = "2013";
I also noticed that:
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID);
$('#' + targID).show ();
} );
Is not going to trigger in your code as it is. Did you mean to change the ID in the other .change() function?

Categories