Check if there is any option then show div - javascript

I want to check if there is an option in select then show the div if not then hide. I am not checking selected option I am checking all options.
if (jQuery(".sd select option").text() == 'S') {
console.log('hello');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="input-box sd">
<select name="options[1261]" id="select_1261" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
<option value="">-- Please Select --</option>
<option value="6888" price="0">S </option>
<option value="6889" price="0">M </option>
</select>
</div>

if there is an option in select
You can use .filter() to iterate over the options and check them length of the matched items, similar to this.
var hasOptionS = $('select option').filter(function(){return this.text.trim().toUpperCase() === 'S'}).length > 0;
var hasOptionP = $('select option').filter(function(){return this.text.trim().toUpperCase() === 'P'}).length > 0;
console.log('has Option S:', hasOptionS);
console.log('has Option P:', hasOptionP);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="input-box sd">
<select name="options[1261]" id="select_1261" class=" required-entry product-custom-option" title="">
<option value="">-- Please Select --</option>
<option value="6888" price="0">S </option>
<option value="6889" price="0">M </option>
</select>
</div>
then show the div if not then hide
Ones you have the result you can use it in your conditional check, similar to this:
if(hasOption){
$(yourDiv).show();
} else {
$(yourDiv).hide();
}

var theSelect = document.getElementById("select_1261");
var stop = false;
for (var i = 0; i < theSelect.options.length & stop != true; i++) {
switch (theSelect.options[i].innerHTML) {
case "S ":
case "M ":
document.getElementById("cooldiv").style.display = "none";//hide the div
stop = true;
break;
default:
break;
}
}

$('.dropdown').each(function() {
var _length = $(this).children('option').length - 1;
//console.log(_length);
if (_length < 1) {
$(this).hide();
}
});
.dropdown-box {
display: inline-block;
background-color: #F4F4F4;
margin: 10px;
padding: 20px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-box">
<p>Has values:</p>
<div class="input-box">
<select name="options[1261]" id="select_1261" class="dropdown">
<option value="">-- Please Select --</option>
<option value="6888" price="0">S </option>
<option value="6889" price="0">M </option>
</select>
</div>
</div>
<div class="dropdown-box">
<p>Has no values:</p>
<div class="input-box">
<select name="options[1261]" id="select_1261" class="dropdown">
<option value="">-- Please Select --</option>
</select>
</div>
</div>

Related

Select options based on another option selected

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>

Add a bootstrap class to JS class

I have a small question,
At the moment I have a 2 option boxes in my Test.php file. I want to show my second option box when I select leverancier in the first one. so far so good!
But now I want to apply some CSS to it...
for example the bootstrap form-control class...
this is my (simple) code:
<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden");
}
else {
$("#Klanttable").addClass("hidden");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
So how can I make my first option box the same as my second option box?
With Jquery you can add multiple classes at once so your solution would just be:
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});
<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden form-control" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
now it's removing only the class, not the option box itself......

show hide div based on select option value jQuery

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!

jquery dropdown onchange not working in Safari

Working on a multi dropdown, where the first dropdown shows a second dropdown depending on the selection and second dropdown selection returns a relevant message. So far working fine in Chrome / FF but no luck in Safari/iOS.
$(function(){
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
$('#groups').trigger('change');
});
$(function() {
$('#sub_groups').change(function(){
$('.messages').hide();
$('#' + $(this).val()).show();
});
});
HTML:
<style>
.messages {color: #000; display: none;}
</style>
<select id="groups">
<option value='0'>Select 1</option>
<option value='zone1'>main group 1</option>
<option value='zone2'>main group 2</option>
<option value='zone3'>main group 3</option>
</select>
<select id="sub_groups">
<option data-group='SHOW' value='0'>Select 2</option>
<option data-group='zone1' value='message1'>option 1 </option>
<option data-group='zone1' value='message1'>option 2 </option>
<option data-group='zone2' value='message2'>option 3 </option>
<option data-group='zone2' value='message2'>option 4 </option>
<option data-group='zone3' value='message3'>option 5 </option>
<option data-group='zone3' value='message4'>option 6 </option>
</select>
<div class="output">
<div id="message1" class="messages">message 1</div>
<div id="message2" class="messages">message 2</div>
<div id="message3" class="messages">message 3</div>
<div id="message4" class="messages">message 4</div>
</div>
Any suggestions would be much appreciated, thanks.

displaying Multiple select option in diiferent line

I have a multiple select option that display the result in a div container, when click on ctrl+"orange""apple""banana" the result display: "orange, apple, banana" in one line, but i want to display each result in a new single line with a link that goes to different page like this:
Orange - "goes to a link"
Apple - "goes to a link"
Banana - "goes to a link"
Here are my codes below:
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript">
</script>
<select name="" multiple="multiple" id="select-custom-19">    
<option>Add Fruits</option>        
<option value="orange" selected>orange</option> 
<option value="apple">apple</option>
<option value="banana">banana</option>             </select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; "> <span id="yourfruit"> </span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#select-custom-19').change(function() {
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
$('#yourfruit').text($(this).val());
});
});
</script>
your help will be highly appreciated.
Thanks
You can try adding <br/> element after every selected option. I have used <label> element but you can add link or any other element you want
$(document).ready( function ()
{
$('#select-custom-19').change(function(){
$('#yourfruit').empty();
var values = $(this).val();
for(var i=0; i < values.length ; i++)
{
$('#yourfruit').append('<lable>'+values[i]+'</label><br/>');
}
});
});
JSFiddle Demo
You can iterate throug items and display them, append an anchor (<a />) and use <br /> for a new line.
Make sure to add .empty() to clean the fruits from list before .append() other items to $('#yourfruit'), like in example below.
var fruits = $(this).val();
$('#yourfruit').empty();
for (var fruit in fruits) {
var label = $('<label/> ').text(fruits[fruit]+" - ");
$('#yourfruit').append(label)
.append($('<a class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
.append('<br />');
}
$(document).ready(function() {
$('#select-custom-19').change(function() {
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
var fruits = $(this).val();
$('#yourfruit').empty();
for (var fruit in fruits) {
var label = $('<label/> ').text(fruits[fruit] + " - ");
$('#yourfruit').append(label)
.append($('<a class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
.append('<br />');
}
});
});
.tab-btn {
color: red;
}
.tab-btn:hover {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; ">
<span id="yourfruit"> </span>
</div>
try below
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903; color:#000000; margin: 10px; ">
<ul id="yourfruit">
</ul>
</div>
<script type="text/javascript">
$(document).ready( function ()
{
$('#select-custom-19').change(function()
{
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
$('#yourfruit').append('<li>'+$(this).val()+'</li>');
}
);
});
</script>
You may add HTML tags as per your requirements, like <a> or </br>
$(document).ready(function () {
$('#select-custom-19').change(function () {
$('#yourfruit').text("");
if($(this).val() != null)
{
$(this).val().forEach(function (value, index) {
$('#yourfruit').append("<a href='#'>" + value + "</a></br>");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; "> <span id="yourfruit"> </span>
</div>

Categories