I can put a value in a select like this (mark the select option):
document.getElementById('language').value = "en";
How can I use that on more select option fields?
The Html
<fieldset class="form-group">
<select class="form-control" id="language" multiple="">
<option value="de">german</option>
<option value="en">english</option>
<option value="tr">turkey</option>
</select>
</fieldset>
If you want certain options to be selected you can use querySelectorAll() method to get the options with certain values and use forEach() to loop through all the options you have just queried and add selected as true. I hope this is what you are trying to achieve:
var languages = ['de', 'tr'];
for(var i = 0; i < languages.length; i++){
var all = document.querySelectorAll('#language option[value="' + languages[i] + '"]');
all.forEach(function(element){
element.selected = true;
});
}
<fieldset class="form-group">
<select class="form-control" id="language" multiple="">
<option value="de">german</option>
<option value="en">english</option>
<option value="tr">turkey</option>
</select>
</fieldset>
You can pass an array instead of a string to jQuery's val().
$('#language').val(["de", "tr"]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<fieldset class="form-group">
<select class="form-control" id="language" multiple="">
<option value="de">german</option>
<option value="en">english</option>
<option value="tr">turkey</option>
</select>
</fieldset>
Related
I have 4 choice fields in a single form. My jQuery code only captures one field. How can I capture the other fields and extract their values?
Also, I have applied the Select2 plugin on all these fields. Can someone please guide me? Thanks in advance.
$('select').change(function() {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
var csr = $("input[name=csrfmiddlewaretoken]").val();
console.log(textSelected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
<option value="" selected>---------</option>
<option value="8">jfkdfkldlfd</option>
</select>
<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
<option value="" selected>---------</option>
<option value="1">fefafd</option>
<option value="2">effeafaefe</option>
</select>
<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
<option value="" selected>---------</option>
<option value="1">fdfef</option>
</select>
<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
<option value="" selected>---------</option>
<option value="1">kflkdjkf</option>
<option value="2">fldfjdfj</option>
</select>
To get the selected text of all the select elements you can use map() to build an array of them, like this:
let getSelectedText = () => {
let textArr = $selects.map((i, el) => $(el).find('option:selected').text()).get();
console.log(textArr);
}
let $selects = $('select').on('change', getSelectedText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
<option value="" selected>---------</option>
<option value="8">jfkdfkldlfd</option>
</select>
<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
<option value="" selected>---------</option>
<option value="1">fefafd</option>
<option value="2">effeafaefe</option>
</select>
<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
<option value="" selected>---------</option>
<option value="1">fdfef</option>
</select>
<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
<option value="" selected>---------</option>
<option value="1">kflkdjkf</option>
<option value="2">fldfjdfj</option>
</select>
When the form is submit I can only get the number assigned to the value. I want to submit any of the texts that is between the select options.
For example, when I select Bird and Dove I want to receive Bird and Dove not 3 and 3
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option value="0">-Select-</option>
<option value="1">Cars</option>
<option value="2">Phones</option>
<option value="3">Birds</option>
</select>
<select name="select2" id="select2">
<option value="0">-Select-</option>
<option value="1">BMW</option>
<option value="1">Benz</option>
<option value="1">Toyota</option>
<option value="2">iPhone</option>
<option value="2">Samsung</option>
<option value="2">Motorola</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="3">Dove<option>
</select><br>
<label>Postal code</label>
<input type="number" name="zipcode" placeholder="postal code">
<button>Search</button>
</form>
When the form is submit the value of the selected option is sent. The problem is because you're using this value to match the child option elements to the parent.
To fix this you need to use value as it was intended, ie. to hold the value you want to send to the server when the form is submit, and use a different method for grouping the option elements between select. I'd suggest using a data attribute for this instead, like this:
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>
Just change the value from number to text.
example
<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>
Done!
How to take the values of value1 and value2 in two variables using javascript?
<select class="form-control" id="country" name="country">
<option value="**value1**" "**value2**" >Select Item</option>
</select>
You could make your own attribute. I know you probably do not want to get the element with an ID, but I don't know the context. You can just call getAttribute on the option and use any name you gave to the "custom" attribute.
window.addEventListener('load', ()=>
{
const option = document.getElementById('option');
function init()
{
//Use this to get the values
console.log(option.getAttribute('other-value'));
}
init();
});
<select class="form-control" id="country" name="country">
<option id="option" value="value1" other-value="value2">Select Item</option>
</select>
I don't know what you really want to do with your piece of code,
but here is a proper way to use the option elements, and a way to split multiple values with a fixed separator:
var example = document.getElementById('example');
example.addEventListener('change', function() {
// Console displays the “value”, and not the text, of the selected option
console.log("option value:", example.value);
});
// Here is what I'll do with your "multiple" values
var country = document.getElementById('country');
var options = country.querySelector('option');
var values = options.value.split("/");
values.forEach(function(val) {
country.innerHTML += "<option value=" + val + ">" + val + "</option>";
});
<p>My simple example</p>
<select id="example" name="country">
<option value="--">Select Country</option>
<option value="GB">Great Britain</option>
<option value="FR">France</option>
</select>
<br>
<br>
<p>Example with option getting splitted</p>
<select class="form-control" id="country" name="country">
<!-- Let's say your multiple values are separated by a "/" -->
<option value="**value1**/**value2**">Select Item</option>
</select>
Hope it helps.
$('select').on('change', function() {
console.log( $('#country').val() );
console.log($(this).find(':selected').data('second'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="country" name="country">
<option value="value1" data-second ="value2" >Select Item 1</option>
<option value="value3" data-second ="value4" >Select Item 2</option>
</select>
I'm working on a small website and I currently have two dropdowns in my form, both are below:
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner">Beginner</option>
<option value = "Intermediate">Intermediate</option>
<option value = "Advanced">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value = "lowerLevel">Lower Level</option>
<option value = "upperLevel">Upper Level</option>
</select>
<br/>
I've experimented with some javascript but only at a beginner level. I was wondering if there's a way to disable a specific value in the studentType dropdown.
So for example if i select "Beginner" in the first dropdown then the option for "UpperLevel" in the second dropdown should be disabled.
This is what I tried, but it was not working:
var dropdown = document.getElementById("classType");
dropdown.onchange = function(event){
if (dropdown.value == "Beginner") {
// .....
Any ideas?
Thanks!
You can achieve this by hooking an event handler to the change event of the first select which sets the disabled property of the relevant option in the second select based on the chosen option, something like this:
$('#classType').change(function() {
$('#studentType option[value="upperLevel"]').prop('disabled', $(this).val() == 'Beginner')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="classType" id="classType" required>
<option value="" disabled="true" selected="true">Select Your Class Type</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select><br/>
<select name="studentType" id="studentType" required>
<option value="" disabled="true" selected="true">Select Your Student Type</option>
<option value="lowerLevel">Lower Level</option>
<option value="upperLevel">Upper Level</option>
</select><br/>
This should fit your needs:
http://codepen.io/themeler/pen/yOjWXB
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner">Beginner</option>
<option value = "Intermediate">Intermediate</option>
<option value = "Advanced">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value="lowerLevel">Lower Level</option>
<option value="upperLevel">Upper Level</option>
</select>
<br/>
$(function () {
var $class = $('#classType'),
$student = $('#studentType');
$class.on('change', function () {
var $this = $(this),
$ul = $student.find('[value="upperLevel"]');
// clear value of student type on class type change
$student.find(':selected').prop('selected', false);
$student.find('option:first-child').prop('selected', true);
// lock / unlock position
if ($this.val() === 'Beginner') {
$ul.prop('disabled', true);
} else {
$ul.prop('disabled', false);
}
});
});
By jQuery:
$('#studentType option[value="upperLevel"]').attr('disabled','disabled');
Here is how I would do it, add a data-enabled tag to each option like this:
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner" data-enabled="lowerLevel">Beginner</option>
<option value = "Intermediate" data-enabled="lowerLevel,upperLevel">Intermediate</option>
<option value = "Advanced" data-enabled="upperLevel">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value = "lowerLevel">Lower Level</option>
<option value = "upperLevel">Upper Level</option>
</select>
<br/>
And on change of the drop down, disable all options in the other drop down, then loop through and see if they're either in the enabled tag of the selected, or blank like this:
$('#classType').on('change', function(){
var allowed = $('#classType option:selected').attr('data-enabled').split(',');
$('#studentType option').attr('disabled','disabled');
$('#studentType option').each(function(){
if (allowed.indexOf($(this).val()) > -1 || !$(this).val()) {
$(this).removeAttr('disabled');
}
});
});
I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>
Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/
I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.
<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have