Post Edited: Using MutationObserver instead of DOMSubtreeModified
I have a div where I am using .each to go through every label and get their text, but I'd like to add an additional ifelse statement where if the label includes a select child, add the selected option to the text string
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
var target = document.querySelector('#droppable')
var observer = new MutationObserver(function(mutations) {
var str = "";
$('#droppable label').each(function(){
str += $(this).text() + "<br>";
document.getElementById("inside_drop_zone").innerHTML = str
});
})
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label><select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label><select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Desired Output
label OR label : selected option
ONE + ":" + week 1
THREE
TWO + ":" + week 3
I'm pretty new to JQuery so thank you for any help/tips!
Look for lines marked // changed
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
$("body").on('DOMSubtreeModified', "#droppable", function() {
var str = "";
$('#droppable label').each(function() {
const txt = $(this).text() // changed
const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select>
str += txt + (val ? ":" + val : "") + "<br>"; // changed
})
document.getElementById("inside_drop_zone").innerHTML = str
});
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label>
<select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label>
<select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Related
function setError(input, message) {
const form = input.parentElement;
const small = form.querySelector('small');
small.innerText = message;
form.className = 'inputfield error';
}
function setSuccess(input) {
const form = input.parentElement;
form.className = 'inputfield success';
}
Here is my JavaScript code for setting error or success to the input fields. It is working fine for the inputs.
but when I am trying to apply the same code for custom select boxes it is not working. I am new to web development so any sort of help would be appreciated.
reference Input Field Code :
<div class="inputfield">
<label>NID</label>
<input type="text" value="" class="input" id="nid" onkeyup="checkNid()">
<small>Error Message</small>
</div>
reference Custom Select Code :
<div class="inputfield">
<label>Gender</label>
<div class="custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
</div>
<small>Error Message</small>
</div>
Here is the output. I am expecting the same sort of error message for the select fields too:
output
Replace your reference Custom Select Code with this:
<div>
<label>Gender</label>
<div class="inputfield custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
<small>Error Message</small>
</div>
</div>
If you had shared your CSS file, I would have suggested how to style it better.
.wrapper .form .inputfield .custom_select {
position: relative;
width: 100%;
height: 37px;
}
.wrapper .form .inputfield .custom_select:before {
content: '';
position: absolute;
top: 12px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent transparent;
pointer-events: none;
}
.wrapper .form .inputfield .custom_select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 100%;
height: 100%;
border: 0px;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
helere is the css for the custom selection
I have 2 optgroup in my select list (category and subcategory)
and i am trying to show optgroup and hide other on selection of subcategory.
for example if I choose in the category (sport, music)
in the subcategory I display only the sport and music
I tried with the following code but it doesn't work
Thanks
$("#custom_form_names_category").on("change", function() {
var selectedVal = $(this).find("option:selected").text();
console.log(selectedVal);
$('#custom_form_names_subcategorie > [aria-label="' + selectedVal + '"]')
.show()
.siblings("optgroup")
.css("display", "none");
});
$(".js-select2").select2({
closeOnSelect: false,
allowClear: true,
tags: true,
dropdownCssClass: "beforecheckbox"
});
.select2.select2-container {
width: 100% !important;
}
.select2-container .select2-selection__rendered {
padding: 5px 15px 0 15px;
text-transform: uppercase;
font-size: 13px;
box-shadow: none;
background-image: none;
text-transform: uppercase;
font-size: 13px;
}
.select2-container .select2-selection--single {
height: 100% !important;
border-radius: 15px !important;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
color: #fff;
background: url(../images/svg/check_active.png);
border: 0;
display: inline-block;
padding-left: 3px;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=false]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
border: #b7b9cc solid 2px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
background: red;
}
#custom_form_names_category {
margin-bottom: 50px !important;
}
.select2.select2-container {
margin-bottom: 50px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select id="custom_form_names_category" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1" data-select2-id="25">Sport</option>
<option value="17" data-select2-id="26">Volley</option>
<option value="18" data-select2-id="27">Musci</option>
<option value="29" data-select2-id="28">film</option>
<option value="35" data-select2-id="29">Englich</option>
</select>
<select id="custom_form_names_subcategorie" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible">
<optgroup label="Sport" data-select2-id="33">
<option value="2" data-select2-id="34">Dance </option>
</optgroup>
<optgroup label="Musci" data-select2-id="35">
<option value="3" data-select2-id="36">Catégorie 4</option>
<option value="4" data-select2-id="37">Rap</option>
</optgroup>
<optgroup label="Volley" data-select2-id="38">
<option value="5" data-select2-id="39">Catégorie 4</option>
</optgroup>
<optgroup label="film" data-select2-id="40">
<option value="7" data-select2-id="41">Catégorie 5</option>
</optgroup>
</select>
You cannot interact with the option groups, You can only disable them, but with the rendered result of select2.
test:
$('#custom_form_names_subcategorie').on('select2:open', function (e) {
//var first = $('#custom_form_names_category').find(':selected');
//console.log(first);
setTimeout(function(){
$('[aria-label]').hide();
$('#custom_form_names_category').find(':selected').each(function( index ) {
var selected = $( this ).text();
console.log( index + ": " + selected );
$('[aria-label="' + selected + '"]').show();
console.log($('[aria-label="' + selected + '"]'));
});
},100);
//$('[aria-label="' + selectedVal + '"]').show().siblings("li").css('display', 'none');
});
This also works when you select more than one. I had to put a setTimeout because in the on open event, of the version of select2 you used, in reality the select is not yet drawn. try to change version. However this works.
Alternatively you should fill the second select dynamically as defined in this link:
Add, select, or clear items
i have a code the drop downs are working fine... but i want the Text thats typed in the text box to output after the $s= in the results here is the code that is being used
http://jsfiddle.net/Webbytest/ygz32s0u/
$("#month, #color").change(function() {
var month = $("#month").val();
var color = $("#color").val();
var content = '';
if (month && color) {
var monthlabel = $("label[for=" + month + "]").text();
var colorlabel = $("label[for=" + color + "]").text();
content = ' ' + monthlabel + '' + colorlabel + '&s=';
}
$("#output").text(content).fadeIn();
});
body {
margin: 10px;
}
form {
margin: 0px auto;
width: 370px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 13px/18px;
font-weight: 300;
padding: 10px 0px;
text-align: center;
}
.output {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 13px/20px;
font-style: normal;
font-weight: 100;
text-align: center;
}
h2 {
color: #009CDC;
font-family: 'Roboto', sans-serif;
font-size: 2.5em;
font-style: normal;
font-weight: 100;
line-height: 1.17em;
text-align: center;
}
input {
display: true;
margin-bottom: 10px;
}
label {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>test header</h2>
<p>blahblah.</p>
<form>
<select id="month">
<option value="caeqweqwm1">Select NUMBER</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5">5</option>
</select>
<label class="1" for="1">/bookmark1.php?f=</label>
<label class="2" for="2">/bookmark2.php?f=</label>
<label class="3" for="3">/bookmark3.php?f=</label>
<label class="4" for="4">/bookmark4.php?f=</label>
<label class="5" for="5">/bookmark5.php?f=</label>
<select id="color">
<option value="qwq">Select Date</option>
<option value="6-28-18">6-28-18</option>
<option value="6-29-18">6-29-18</option>
<option value="6-30-18">6-30-18</option>
<option value="7-1-18">7-1-18</option>
</select>
<label class="6-28-18" for="6-28-18">062818xdasddA</label>
<label class="6-29-18" for="6-29-18">062918x31ewqeqwe</label>
<label class="6-30-18" for="6-30-18">063018x3123233</label>
<label class="7-1-18" for="7-1-18">070118x23232</label>
<input name="formtext1" type="text">
<p id="output"></p>
Full disclosure: I'm not a user of JQuery. If I had to do it, this is (maybe) how I'd do it with hand-written ES5. Note the event listener we're watching for is 'input' instead of 'change' as it seems to work better for all inputs involved.
The entire handler is encapsulated in a function to avoid colliding with JS outside of the function. I also changed the value of your "SELECT a whatever" option to an empty string to test for falsy input values.
function fieldChangeHandler(){
var values = {
month: '',
color: '',
search: ''
}
var output = document.getElementById('output');
function outputString(){
output.innerHTML = values.month + values.color + values.search;
}
function updateValue(e) {
switch(e.target.id) {
case 'search':
values[e.target.id] = e.target.value ?
'&s='+encodeURI(e.target.value) : '';
break;
default:
values[e.target.id] = e.target.value ?
document.querySelector('label[for="'+e.target.value+'"]').innerHTML : '';
}
outputString();
}
var inputs = document.querySelectorAll('.form_field');
inputs = Array.prototype.slice.call(inputs);
inputs.forEach(function(input){
input.addEventListener('input', updateValue);
});
}
fieldChangeHandler();
body {
margin: 10px;
}
form {
margin: 0px auto;
width: 370px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 13px/18px;
font-weight: 300;
padding: 10px 0px;
text-align: center;
}
.output {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 13px/20px;
font-style: normal;
font-weight: 100;
text-align: center;
}
h2 {
color: #009CDC;
font-family: 'Roboto', sans-serif;
font-size: 2.5em;
font-style: normal;
font-weight: 100;
line-height: 1.17em;
text-align: center;
}
input {
display: true;
margin-bottom: 10px;
}
label {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>test header</h2>
<p>blahblah.</p>
<form>
<select id="month" class="form_field">
<option value="">Select NUMBER</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5">5</option>
</select>
<label class="1" for="1">/bookmark1.php?f=</label>
<label class="2" for="2">/bookmark2.php?f=</label>
<label class="3" for="3">/bookmark3.php?f=</label>
<label class="4" for="4">/bookmark4.php?f=</label>
<label class="5" for="5">/bookmark5.php?f=</label>
<select id="color" class="form_field">
<option value="">Select Date</option>
<option value="6-28-18">6-28-18</option>
<option value="6-29-18">6-29-18</option>
<option value="6-30-18">6-30-18</option>
<option value="7-1-18">7-1-18</option>
</select>
<label class="6-28-18" for="6-28-18">062818xdasddA</label>
<label class="6-29-18" for="6-29-18">062918x31ewqeqwe</label>
<label class="6-30-18" for="6-30-18">063018x3123233</label>
<label class="7-1-18" for="7-1-18">070118x23232</label>
<input id="search" class="form_field" type="text">
<p id="output"></p>
You aren't considering the changes on input, or reading their values.
$("#month, #color") --> $("#month, #color, input[name='formtext1'")
The value of the input: $("[name='formtext1']").val();
http://jsfiddle.net/ygz32s0u/7/
Another alternative is to add an ID to the input for more precise selection:
http://jsfiddle.net/ygz32s0u/13/
Hi I want to add checkbox for all the options in dropdown.
My HTML is like this -
<div class="multi-select-dd-list">
<div id="checkboxes" class="patient-list-selection">
<select class="patient-list-select specialty-list-left" data-bind="options : specialtiesList, optionsText : 'name'">
</select>
</div>
</div>
So here I am binding specialtiesList.
What I want is a way to use checkbox before each option of the dropdown.
Any suggestions?
Here's the code implementing the same. I think you are looking something like this.
.js, .css and .html file
function CheckableBox(label, isChecked) {
this.label = label;
this.isChecked = ko.observable(isChecked || false);
}
function ViewModel() {
this.items = [
new CheckableBox("First", true),
new CheckableBox("Second", true),
new CheckableBox("Third")
];
this.selectedItems = ko.observableArray();
/* Includes only the checked items */
this.tempSelection = ko.pureComputed(function() {
return this.items.filter(function(item) {
return item.isChecked();
});
}, this);
/* Builds a comma separated string of selected items */
this.selectedItemsStr = ko.pureComputed(function() {
var str = this.selectedItems()
.map(function(item) {
return item.label;
})
.join(", ")
return str || "-- No options selected --";
}, this);
/* Determines whether the selectable options are displayed. */
this.optionsShown = ko.observable(false);
this.optionsShown.subscribe(function() {
this.updateSelections();
}, this);
this.confirmSelection();
};
ViewModel.prototype.toggleOptions = function() {
this.optionsShown(!this.optionsShown());
};
ViewModel.prototype.confirmSelection = function() {
this.selectedItems(this.tempSelection());
this.closeOptions();
};
ViewModel.prototype.closeOptions = function() {
this.optionsShown(false);
}
ViewModel.prototype.updateSelections = function() {
var selection = this.selectedItems();
this.items.forEach(function(item) {
item.isChecked(~selection.indexOf(item));
});
}
ko.applyBindings(new ViewModel());
* {
box-sizing: border-box;
font-family: sans-serif;
}
.main-container {
width: 400px;
}
.main-container,
.select-container {
position: relative;
}
.select-container {
height: 2em;
}
select,
.select-container::after {
width: 100%;
height: 100%;
}
.select-container::after {
content: "";
position: absolute;
top: 0;
background: rgba(0,0,0,0);
display: block;
}
.options-container {
position: absolute;
top: 2em;
width: 100%;
border: 1px solid #A9A9A9;
background: #FFFFFF;
display: none;
}
.options-container.shown {
display: block;
}
label {
display: block;
padding: .2em;
}
label:not(:last-child) {
border-bottom: 1px solid #FFFFFF;
}
.checked {
background: #568ECB;
color: white;
}
.button-container {
display: flex;
justify-content: flex-end;
border-top: 1px solid #A9A9A9;
background: #F6F6F6;
}
.button-container button {
margin: .4em;
margin-left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="main-container">
<div class="select-container" data-bind="click: toggleOptions">
<select data-bind="options: [selectedItemsStr]"></select>
</div>
<div class="options-container" data-bind="css: { 'shown': optionsShown }">
<div class="options" data-bind="foreach: items">
<label data-bind="css: { 'checked': isChecked }">
<input type="checkbox" data-bind="checked: isChecked">
<span data-bind="text: label"></span>
</label>
</div>
<div class="button-container">
<button type="button" data-bind="click: confirmSelection">OK</button>
<button type="button" data-bind="click: closeOptions">Cancel</button>
</div>
</div>
</div>
$(document).ready(function() {
$('select').material_select();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
I have a list control and at run time when I bind data to the control I want to append a delete icon or a button to each row in jquery, so that I can delete a row if I want to. Here is the code that I am using to bind data to the control.
$(response.aaData).each(function (index, val) {
$("#multiselectSubCat")
.append($('<option></option>').val(val.SubCategoryId).html(val.SubCategoryName));
});
Rendered
<select name="from" id="multiselectSubCat" multiple="multiple" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>
I want to know whether you want input button or image to show user that you can delete particular record?
I have made an example where I am adding background.
.select-box {
height: 400px;
}
.select-box option {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat;
padding-left: 25px;
cursor: pointer;
}
.select-box option:hover {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat #eee;
}
<select name="from" id="multiselectSubCat" multiple="multiple" class="select-box" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>
Building on this
How can I use <ul> list instead of <select> dropdown for the languages switcher?
have a go at this:
var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideUp(200);
} else {
nav.addClass('active');
selection.stop().slideDown(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
select.removeClass('active');
$(this).addClass('active');
alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});
$(".del").on("click",function(e) {
e.preventDefault();
$(this).parent().remove();
});
h2 {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol
{
list-style-type: none;
}
ol.select {
display: none;
}
ol.select > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select > li:hover {
background: #aaa;
}
.select a { text-decoration:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
<li data-value="en"><a class="del" href="#">X</a> English</li>
<li data-value="de"><a class="del" href="#">X</a> Deutsch</li>
</ol>
U did the right thing just little changes required
<a href="http://jsfiddle.net/ajaymalhotra15/2tmntdft/" > click here to see code </a>