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>
Related
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.
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>
I`ve a "select":
<select class="date-select2" name="date">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
When I`m try to get value of select,
document.getElementsByClassName('date-select2')[0].value
it normally returns a value of selected item in Chrome. In FF and Safari sometimes it returns an empty string, when selected a numeric value(not "All").
How to deal with it?
I think this might help you:
HTML
<select class="date-select2" name="date" onchange="myFunction(this.value)">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
JavaScript
function myFunction(curValue) {
alert(curValue);
}
Working : Fiddle
Note: Also remember to put your JavaScript code inside body also right before it ends.
var select = document.querySelector('select.date-select2');
// add onchange handler
select.onchange = function(){
var idx = select.selectedIndex;
var val = select.options[idx].value;
// if All is selected use text of option
if(val=="")
val = select.options[idx].textContent;
};
You can try this way to get selected item:
$(".date-select2 option:selected").text();
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>
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)