I'm trying to show a select option and then show a input to filter
here's my js code
function showSearch(id) {
if (id == "statusSearch") {
$("#statusSearch").show();
$("#monthSearch").hide();
$("#employeeSearch").hide();
}
}
But it doesn't work, it doesn't show anything. Only my first select option
<select id="status" name="status" onChange="showSearch(this.value);">
<option selected disabled>Select</option>
<option name="statusSearch">Estado de OT</option>
<option name="monthSearch">Mes</option>
<option name="employeeSearch">Empleado</option>
</select>
<button type="submit">Ver todo</button>
Example, if I choose "statusSearch"
<div id="statusSearch" style="display: none;">
<h2>Estado de OT</h2>
<select type="text" name="searchByStatus">
<option selected disabled>Elegir</option>
<option name="open">Abierta</option>
<option name="closed">Cerrada</option>
</select>
</div>
And it's my view
$req3=$request;
if($req3) {
$query = trim($req3->get('statusSearch'));
$search = MaintenanceTasks::select('Employee_Id_created','Task_Id','Machine_Id',
'Request_date')//etc
->get();
}
Well, I don't know what I'm doing wrong
use value="statusSearch" than name="statusSearch" on your options
example :
<option selected disabled>Select</option>
<option value="statusSearch">Estado de OT</option>
<option value="monthSearch">Mes</option>
<option value="employeeSearch">Empleado</option>
like here https://codepen.io/JUSEN/pen/dyOperB?editors=1010
Your selector is not correct:
function showSearch(id) {
$( "#statusSearch option" ).each(function( index ) {
if (id == "statusSearch") {
$("#statusSearch option).each(function( ) {
if($this).attr('name') == "statusSearch"){
$(this).show();
}else if($this).attr('name') == "monthSearch"){
$(this).hide();
}else if {
//and so on
:
});//end each
Related
Im trying to select an option when i choose a specific option from list above. Any help how can achieve that?
Print of frontend
The main idea is, when i choose Field_Support, select option "94" from StardardTemplateID
My actual try:
$(document).ready(function () {
setTimeout(function () {
const Action = Core.Config.Get("Action");
const SupportedActions = ["AgentTicketNote"];
if ($.inArray(Action, SupportedActions) !== -1) {
if (Action === "AgentTicketNote") {
$('#DynamicField_QueueNote').on('change', function () {
const Option = $(this).val();
if (Option === '- Move -')
$('#Subject').val('');
else if (Option === 'Field_Support')
$('#Subject').val('Nota para Field');
else if (Option === 'Field_Support')
$("#StandardTemplateID").html("<option value='94'>dados_para_field</option>");
else if (Option === 'Helpdesk')
$('#Subject').val('Nota para Helpdesk');
else if (Option === 'Sistemas_Windows')
$('#Subject').val('Nota para Sistemas');
else if (Option === 'Networking')
$('#Subject').val('Nota para Networking');
});
}
}
})
});
Here's one way. Bake the value associations into the select option elements as data-attributes. Then just reference it on the change event.
$(document).ready(function() {
$('select#DynamicField_QueueNote').change(function() {
$('select#StandardTemplateID').val($(this).find('option:selected').data('link'))
$('#StandardTemplateID_Search').val($('select#StandardTemplateID').find('option:selected').text());
$('#Subject').val($(this).find('option:selected').data('subject'))
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
<option value="">-</option>
<option value="- Move -" selected="selected">- Move -</option>
<option value="Field_Support" data-link='94' data-subject='Nota para Field'>Field_Support</option>
<option value="Helpdesk" data-link='' data-subject='Nota para Helpdesk'>Helpdesk</option>
<option value="Sistemas_Windows" data-link='' data-subject='Nota para Sistemas'>Sistemas_Windows</option>
</select>
<hr>
<label>Subject</label>
<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate Validate_Required" aria-required="true">
<hr>
<label for="StandardTemplateID">Text Template:</label>
<div class="Field">
<div class="InputField_Container" tabindex="-1">
<div class="InputField_InputContainer"><input id="StandardTemplateID_Search" class="InputField_Search ExpandToBottom" type="text" role="search" autocomplete="off" aria-label="Text Template:" style="width: 273.333px;" aria-expanded="true"></div>
</div>
<select class="Modernize" id="StandardTemplateID" name="StandardTemplateID" style="display: none;">
<option value="">-</option>
<option value="71">1ª_Tentativa_Contacto</option>
<option value="72">2ª_Tentativa_Contacto</option>
<option value="73">3ª_Tentativa_Contacto</option>
<option value="80">Acesso_VPN_atribuido</option>
<option value="94">dados_para_field</option>
</select>
<p class="FieldExplanation">Setting a template will overwrite any text or attachment.</p>
</div>
<!--
<select id='select1'>
<option> Choose...</option>
<option value='option1' data-link='100'> Option 1 (link to 100)</option>
<option value='option2' data-link='133'> Option 2 (link to 133)</option>
<option value='option3' data-link='94'> Option 3 (link to 94)</option>
<option value='option4' data-link='120'> Option 4 (link to 120)</option>
</select>
<select id='select2'>
<option></option>
<option value='94'>Template 94</option>
<option value='100'>Template 100</option>
<option value='120'>Template 120</option>
<option value='133'>Template 133</option>
</select> -->
You can create a conditional that checks the value of the select on change and then sets the value of the input if the value of the select equals the target value.
Using jQuery:
$(document).ready(function() {
$('#StandardTemplate').change(function() {
if ($(this).val() === '94') {
$('#text_template').val($('option[value="94"]').text())
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>
Using Vanilla JS:
const sel = document.getElementById('StandardTemplate')
const input = document.getElementById('text_template')
sel.addEventListener('change', e => {
if(e.target.value === '94'){
document.getElementById('text_template').value = document.querySelector('option[value="94"]').textContent
}
})
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>
I have a select list with value 0,1,2,3,4,5,6,7 .On select with value 0 and 1 I want to show a div, but on select with value 2,3,4,5,6,7 I want to hide that div.The code I have right now is below
HTML
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>
jQuery
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() == '2','3','4','5','6','7') {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
The code actually works when I put
.val() == '2')
instead of
.val() == '2','3','4','5','6','7')
But then I cant show the div for other values
You can do it like this if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
Demo
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function() {
$('.rel_status').change(function() {
if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>
use this it will works
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>
That's not a valid way of comparing one value to many others.
if($('.rel_status').val() == '2','3','4','5','6','7')
Use a logic OR Operator instead:
if($('.rel_status').val() == '0' || $('.rel_status').val() = '1') {
$('.rel_part').hide();
} else {
$('.rel_part').show();
}
Notice, that I switched the cases in the if clause so it's less code to write.
The problem is this is not a valid way to use , in Javascript, because you will end up validating if($('.rel_status').val() == '7') { instead.
You can change the code into this
if($.inArray($('.rel_status').val(), ['2','3','4','5','6','7']) != -1) {
and it should work.
Hope it helps!
Trying to show the #authorized_to_purchase_box if one of the seven job titles marked with data-auth="need-purchase-auth" is selected.
Not sure why it's not working. Please critique/let me know if there's a better way to do this.
HTML:
<select name="job_title" id="job_title" onchange='showAuthBox(this);'>
<option selected disabled hidden style='display: none' value=''></option>
<option id="Superintendent" value="Superintendent">Superintendent</option>
<option id="Assistant-Superintendent" value="Assistant Superintendent">Assistant Superintendent</option>
<option id="Principal" value="Principal">Principal</option>
<option id="Vice-Principal" value="Vice Principal">Vice Principal</option>
<option id="Counselor" data-auth="need-purchase-auth" value="Counselor">Counselor</option>
<option id="Testing-Coordinator" data-auth="need-purchase-auth" value="Testing Coordinator">Testing Coordinator</option>
<option id="Curriculum-Director" data-auth="need-purchase-auth" value="Curriculum Director">Curriculum Director</option>
<option id="Administrator" data-auth="need-purchase-auth" value="Administrator">Administrator</option>
<option id="Teacher" data-auth="need-purchase-auth" value="Teacher">Teacher</option>
<option id="Parent" data-auth="need-purchase-auth" value="Parent">Parent</option>
<option id="Student" data-auth="need-purchase-auth" value="Student">Student</option>
</select>
Jquery:
function showAuthBox(val) {
alert(val.dataset.auth);
if(val.dataset.auth == "need-purchase-auth") {
$('#authorized_to_purchase_box').css("display", "block");
} else {
$('#authorized_to_purchase_box').css("display", "none");
}
}
So, I have modified the code a little bit to use jQuery's change event.
Here is the code:
$("#job_title").change(function() {
var auth = $(this).children(":selected").data('auth');
if (auth == 'need-purchase-auth') {
$("#authorized_to_purchase").show();
} else {
$("#authorized_to_purchase").hide();
}
});
Basically, we put an event listener on the select box to fire when you selected a different option. Then, we have to find which option was selected by checking which option has the :selected attribute. Then, we use the attr() method to get the data-auth attribute value. To finish up, you just have to check if the data-auth value is equal to what you are looking for. If so, show the checkbox. If not, hide it. Please let me know if you need further explanation on my code.
//bind the event handler in your script, not inline
$( '#job_title' ).on( 'change', function () {
if ( $( this ).find( 'option:checked' ).data( 'auth' ) === 'need-purchase-auth' ) {
//do stuff
console.log('weee');
}
} );
I'd get rid of the inline event handler and do it this way:
$('#job_title').change(function showAuthBox(val) {
if ($('option:selected', this).data('auth') == "need-purchase-auth") {
$('#authorized_to_purchase_box').css("display", "block");
} else {
$('#authorized_to_purchase_box').css("display", "none");
}
})
#authorized_to_purchase_box {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="job_title" id="job_title">
<option selected disabled hidden style='display: none' value=''></option>
<option id="Superintendent" value="Superintendent">Superintendent</option>
<option id="Assistant-Superintendent" value="Assistant Superintendent">Assistant Superintendent</option>
<option id="Principal" value="Principal">Principal</option>
<option id="Vice-Principal" value="Vice Principal">Vice Principal</option>
<option id="Counselor" data-auth="need-purchase-auth" value="Counselor">Counselor</option>
<option id="Testing-Coordinator" data-auth="need-purchase-auth" value="Testing Coordinator">Testing Coordinator</option>
<option id="Curriculum-Director" data-auth="need-purchase-auth" value="Curriculum Director">Curriculum Director</option>
<option id="Administrator" data-auth="need-purchase-auth" value="Administrator">Administrator</option>
<option id="Teacher" data-auth="need-purchase-auth" value="Teacher">Teacher</option>
<option id="Parent" data-auth="need-purchase-auth" value="Parent">Parent</option>
<option id="Student" data-auth="need-purchase-auth" value="Student">Student</option>
</select>
<div id="authorized_to_purchase_box">
authorized_to_purchase_box
</div>
Try to listen on #job_title's change. Then check to see if the selected option is of "need-purchase-auth" data-auth. So you'd better change your funcion's body to this:
$('select#job_title').on("change", function () {
var dataAuthVal = $(this).children('option:selected').attr('data-auth');
if ('need-purchase-auth' == dataAuthVal)
$('#authorized_to_purchase_box').css("display", "block");
else
$('#authorized_to_purchase_box').css("display", "none");
I have two choice boxes as follows,
<select name="first" id="first">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
Second Select box :
<select name="first" id="first">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
Now when I select "First" in first select box at that time I should not able to select First choice in second select box. If I select second in first choice then I should not able to select 1st and second from second list box, if third then I should not able to select first, second and third. So on.. How can I do it ?
Thanks!
So first give a different name and id to the second select (second for example) and try this JS:
$('#first').change(function() {
var value = $(this).val();
$('#second').children('option').each(function() {
if ( $(this).val() <= value ) {
$(this).attr('disabled',true);
} else {
$(this).attr('disabled',false)
}
});
$('#second').val(parseInt(value)+1);
});
http://jsfiddle.net/charlesrv/av97qfqc/2/
I did it without jQuery:
HTML:
<select name="first" id="first" onchange="changed()">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
<select name="second" id="second">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
JS:
function changed() {
var selected = document.getElementById("first").selectedIndex;
for( var i=0; i<=document.getElementById("second").options.length; i++ ) {
document.getElementById( "second" ).options[i].disabled = false;
}
for( var i=0; i<=selected; i++ ) {
document.getElementById( "second" ).options[i].disabled = true;
}
}
Change id of second select. Try this Fiddle
The value in second select should change with value select in first box:
$("#first").on("change",function(){
var selected = $(this).val();
$('#second').children('option').each(function() {
if ( $(this).val() <= selected ) {
$(this).attr('disabled',true);
} else {
$(this).attr('disabled',false)
}
});
$('#second').val(parseInt(selected)+1) //To change value in second select
})
$('#first').change(function() {
var v = $(this).find("option:selected").index();
$('select[id!="first"] option').each(function() {
if ( $(this).index() <= v ) {
$(this).attr('disabled',true);
} else {
$(this).attr('disabled',false)
}
});
});
Try this code,this does not need to you to add any new ID or names.
I have the following HTML.
<select id="segment_c" name="segment_c[]" multiple="true" size="6" style="width:150" title="" tabindex="0">
<option label="" value="" selected="selected"></option>
<option label="Mobile1" value="Mobile1">Mobile1</option>
<option label="Mobile2" value="Mobile2">Mobile2</option>
<option label="Mobile3" value="Mobile3">Mobile3</option>
</select>
<select name="Mobile1_c" id="Mobile1_c" title="">
<option label="" value=""></option>
<option label="Samsung" value="Samsung">Samsung</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
<select name="Mobile2_c" id="Mobile2_c" title="">
<option label="" value="" selected="selected"></option>
<option label="Samsung" value="Samsung">Samsung</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
<select name="Mobile3_c" id="Mobile3_c" title="">
<option label="" value=""></option>
<option label="Motorola" value="Motorola">Motorola</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
This is a Multiselect List
I needed help in jQuery in the following.
I would like to iterate the multiselect (id="segment_c") such that if value="Mobile1" and value="Mobile2" and value="Mobile3" is selected then show dropdown with id="Mobile1_c" and id="Mobile2_c" and id="Mobile3"
Basically show/hide dropdown based on value selected in multiselect.
Thanks in advance.
John
Notice that values from multiple select are stored inside an array.
$(document).ready(function () {
function hideAll() {
$('#Mobile1_c,#Mobile2_c, #Mobile3_c').hide();
}
hideAll();
$('#segment_c').change(function() {
hideAll();
var val = $(this).val();
if (val == "") {
hideAll();
} else {
for (var i = 0; i <= val.length; i++) {
$('select[name*="' + val[i] + '"]').show();
}
}
});
});
http://jsfiddle.net/4nuAW/2/
#Freak_Droid almost has it but I can't comment for lack of rep.
with that implementation you don't need all three selected as requested
$('#Mobile1_c,#Mobile2_c, #Mobile3_c').toggle();
$('#segment_c').change(function(){
//val returns an array not a jquery object so dont prefix with a $
var val = $(this).val();
//you may want a more robust check here
if(val.length === 3){
$('#Mobile3_c').show();
}else{
$('#Mobile3_c').hide();
}
});
http://jsfiddle.net/VuN78/1