Here, I have a drop-down which has options with values and also there are check boxes which have same values as of drop-down box. so what I am trying to do is when I select the option from drop-down the check box with same value should get selected.
for ex.
if I select the option designer from the drop-down, the checkbox related to designer should get selected because they will have the same value.if I select the engineer from the drop-down, then the engineer check box should get selected and other check boxes should get unchecked.
how can I do this?
here is what i have tried:
<select id="task_for_role" class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
<script type="text/javascript">
$(function(){
$('#task_for_role').change(function() {
var selected = $('#task_for_role option:selected');
if (selected.val() == "null") {
$('input[name="role[]"]').prop('checked', false);
}
else {
$('input[name="role[]"]').prop('checked', true);
}
});
});
</script>
You can use value attribute to achieve this
$(function () {
$('#task_for_role').change(function () {
var val = $(this).val();
$('input[name="role[]"]').prop('checked', false);
$('input[name="role[]"][value=' + val + ']').prop('checked', true);
});
});
Also you have specified id twice for the select so remove one
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
NOTE
I have written code such that only one checkbox would be checked at a time if you need multiple checkboxes to be checked remove this line
$('input[name="role[]"]').prop('checked', false);
You have two id attribute in your select tag! id="task_for" and id="task_for_role"
Should be corrected to:
<select class="multi-selector" id="task_for_role" name="task_for">
And you have wrong value assignment:
var selected = $('#task_for_role option:selected');
if (selected.val() == "null") {
should be:
var selected = $('#task_for_role');
if (selected.val() == "null") {
or ...
var selected = $('#task_for_role option:selected');
if (selected.attr('value') == "null") {
try this It's work:
HTML
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="0">Select</option>
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
Script
<script type="text/javascript">
$(function () {
$('#task_for_role').change(function () {
if ($('#task_for_role').val() == "0") {
$('input:checkbox').prop('checked', false);
}
else {
$('input:checkbox').prop('checked', false);
$('input[value=' + $('#task_for_role').val() + ']:checkbox').prop('checked', true);
}
});
});
</script>
$('#task_for_role').change(function() {
var selected = $('option:selected', this).val();
console.log(selected)
$(':checkbox[value=' + selected + ']').prop('checked', true);
$(':checkbox[value=' + selected + ']').siblings().prop('checked', false);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
Remove one other id attribute on the select element
This could have done this way. You have two id in same element which is not allowed so i have ignored the first one and uses #task_for_role.
It also work when the document is loading as i have fired .change() at
the end.
$('#task_for_role').change(function() {
var selected = $(this).val();
$('input[type="checkbox"]').attr('checked', false);
$('input[value="' + selected + '"]').prop('checked', true);
}).change();
$(function() {
$('#task_for_role').change(function() {
var selected = $(this).val();
$('input[type="checkbox"]').attr('checked', false);
$('input[value="' + selected + '"]').prop('checked', true);
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
Related
I am trying to show a checked checkbox if a value is selected on a select input. So if someone is choosing any value in the dropdown I want the checkbox to switch from off to on. Here is the html example.
I tried different things to achieve that but it is not working at all. My latest try looks like this:
$(document).ready(function() {
$('#subject').each(function() {
if (this.selected)
$("#box-4").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" disabled="disabled">
I think that I am on the right track here but don´t understand why this isn´t working at all.
$(document).ready(function() {
$('#subject').click(function() {
var option = document.getElementById('subject');
console.log(option.value);
if (option.value ==1 ||option.value==2)
$("#box").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" >
It should be .change()
Don't check whether it is selected or not
$(document).ready(function() {
// Change event
$('#subject').change(function() {
// On change, at first reseting all checkboxes state
$('input[type="checkbox"]').each(function() {
$(this).prop('checked', false);
});
// After reseting checkboxes state, check the appropriate checkbox
$("#box-" + this.value).prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box-1" disabled>
<input type="checkbox" id="box-2" disabled>
I have n select array like this:
<select class="form-control" name="upporder['1']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
<select class="form-control" name="upporder['2']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
.
.
.
<select class="form-control" name="upporder['n']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
user can choose all select as 'BOTTOM'
But I want user only can choose one 'TOP'
for example, If choose 'TOP',all of other select be 'BOTTOM'
I try write it via jQuery:
$("[name=upporder]").on('change',(function(e) {
e.preventDefault();
if(this.val() == 2)
// do not do anything
elseif(this.val() == 1)
//change all other 'select' value (with same name) to '2' except current 'select'
}
Try this:
$(".form-control").change(function(){ // handle click event of all selectbox
if($(this).val() == '1') { // check if TOP is selected
$(".form-control").val('2'); // first set all select box value to 2
$(this).val('1'); // set current selectbox to 1
}
});
you need to loop through lists by using .each()
$("select.form-control").on('change',function(e) {
e.preventDefault();
if($(this).val() == '2'){
// do not do anything
}else if($(this).val() == '1'){
//change all other 'select' value (with same name) to '2' except current 'select'
$("select.form-control").not($(this)).each(function(){
$(this).find('option[value="2"]').prop('selected', true);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="upporder['1']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
<select class="form-control" name="upporder['2']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
<select class="form-control" name="upporder['n']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
I did this in javascript code, but it does not work perfectly, the second "select" perfectly "disabled" by default, but I want when I selected an option from the first "select": the second will be "enabled" but it does not work,
and this is the code :
// JavaScript Document
var update_select = function () {
if ($("#edit-field-villes-tid").is(":selected")) {
$('#edit-field-villages-tid-option-limit').prop('disabled', false);
}else {
$('#edit-field-villages-tid-option-limit').prop('disabled', 'disabled');
}
};
$(update_select);
$("#edit-field-villes-tid").change(update_select);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form >
<div class="views-exposed-widgets clearfix">
<label for="edit-field-villes-tid">Villes </label>
<select id="edit-field-villes-tid" name="field_villes_tid" class="form-select">
<option value="All" selected="selected">- Any -</option>
<option value="21">Sousse</option>
<option value="22">Tunis</option></select>
<label for="edit-field-villages-tid-option-limit">Villages </label>
<select id="edit-field-villages-tid-option-limit" name="field_villages_tid_option_limit" class="form-select">
<option value="All" selected="selected">- Any -</option>
<option value="24">El Zahra</option>
<option value="23">Sahlool</option>
</select>
<input class="ctools-use-ajax ctools-auto-submit-click js-hide form-submit" type="submit" id="edit-submit-tunisia" name="" value="Apply">
</div></form>
someone can help me ?
This worked for me;
<script language='javascript' type='text/javascript'>
var update_select = function () {
if ($("#edit-field-villes-tid")[0].selectedIndex > 0) {
console.log("is selected");
$('#edit-field-villages-tid-option-limit').prop('disabled', false);
} else {
console.log("is NOT selected");
$('#edit-field-villages-tid-option-limit').prop('disabled', true);
};
};
$(update_select);
$("#edit-field-villes-tid").on("change", update_select);
</script>
Changing the IF check to [0].selectedIndex > 0 was the key.
I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help
I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});
Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});
Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())
Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/
And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
here's the jsfiddle : https://jsfiddle.net/a1gsgh11/9/
For some reason , the javascript not working in js fiddle. My concern is, when I select multiple checkboxes, the values displays correctly and immediately without having to submit any button.
How do I display these selected values inside the box that currently listed out all the programming languages?
How do I alter below script into what I want?
function moveAll(from, to) {
$('#'+from+' option').remove().appendTo('#'+to);
}
function moveSelected(from, to) {
$('#'+from+' option:selected').remove().appendTo('#'+to);
}
function selectAll() {
$("select option").attr("selected","selected");
}
I want to display the selected checkboxes values inside select dropdown below:
<form name="selection" method="post" onSubmit="return selectAll()">
<select multiple size="10" id="from">
<option value="html">Html</option>
<option value="css">Css</option>
<option value="google">Google</option>
<option value="javascript">Javascript</option>
<option value="jquery">Jquery</option>
<option value="regex">Regex</option>
<option value="php">Php</option>
<option value="mysql">Mysql</option>
<option value="xml">Xml</option>
<option value="json">Json</option>
</select>
<div class="controls">
>>
>
<
<< </div>
<select multiple id="to" size="10" name="topics[]"></select>
<form>
this line displays all the values selected in the checkboxes:
<output>0 are checked<p>No Values</p></output>
Any help appreciated.. Thanks in advance.
Please see the fiddle, it is working fine now: https://jsfiddle.net/a1gsgh11/16/
I change the way the events were called:
$(".moveAll1").click(function(){
$('#from option').remove().appendTo($('#to'));
});
$(".moveAll2").click(function(){
$('#to option').remove().appendTo($('#from'));
});
$(".moveSelected1").click(function(){
$('#from option:selected').remove().appendTo('#to');
});
$(".moveSelected2").click(function(){
$('#to option:selected').remove().appendTo('#to');
});
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {
var selectedtext = ($(this).next().text());
if($(this).is(':checked'))
{
$("#from").append('<option value="' + selectedtext + '">' + selectedtext +'</option>');
}else{
$('option[value*="' + selectedtext + '"]').remove();
}
});
Html :
<input type="checkbox" name="level" id="level" value="1"><label>Primary</label><br/>
<input type="checkbox" name="level" id="level" value="2"><label>Upper Secondary</label><br/>
<input type="checkbox" name="level" id="level" value="3"><label>University</label><br/>
</div>
<div class="small-12 medium-6 large-6 columns">
<input type="checkbox" name="level" id="level" value="4"><label>Lower Secondary</label><br/>
<input type="checkbox" name="level" id="level" value="5"><label>Pre University</label><br/>
<input type="checkbox" name="level" id="level" value="6"><label>Skills/Languages</label><br/>
<div class="controls">
<a class="moveAll1">>></a>
<a class="moveSelected1">></a>
<a class="moveSelected2"><</a>
<a class="moveAll2" href="#"><<</a>
</div>
Is this the behavior you wanted?
var ele = $(this);
var from = $('select#from');
if (ele.prop('checked')) {
var opt = $("<option></option>")
.attr("value", ele.val())
.attr('id', 'op' + ele.val())
.text(ele.val());
from.append(opt);
} else {
var opt = $('#op' + ele.val());
opt.remove();
}
fiddle