I'm using Select2 plugin for select element. I need to show select options over select choice so I set negative margin to select options. Options are showing over select choice but they did not stay opened. Maybe this is happen because of onkeyup event on select result item. But I have no clue how to resolve this problem.
This is example what I want:
HTML:
<select name="">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
JS:
$(document).ready(function() {
$('select').select2({
minimumResultsForSearch: -1
});
});
CSS:
.select2-drop {
margin-top: -26px;
}
Code example: http://jsfiddle.net/quark2014/YC3kt/4/
Thanks
The first step i though is use the select2 event : select2-selecting
The code below
$(document).ready(function() {
$('select').select2({
minimumResultsForSearch: -1
}).on('select2-selecting',function(e){
e.preventDefault();
});
});
JSBIN
But we still have problem Orz..
Related
I am looking for some help with my verification code. I am looking for a simple method to verify two ages. There is a "from age" and a "to age". I need to make sure that the user selects the ages properly. The "from age" should be younger than the "to_age. I made a script and it kind of works. The problem is it does not work consistently. I need it to check, when you select the "from_age" dropdown as well as the "to_age" dropdown. This one seems to only work with one of the dropdowns and one time through. It does not work when the page loads and it sometimes doesn't work at all. I tried two options but neither worked. I tried to use localstorage values since another script I have loads the keys and values on change very well. Or I need to try to fix this version which uses the values in the options dropdown. I am not sure which would work better, but I am thinking the localstorage values are the better choice.
I have tried to use the values associated with the keys in localstorage but I failed on getting it to work. The method using the values in the select/options works but works poorly. Please excuse me if I made any mistakes condensing the code for this question. Thanks
jQuery
$(function() {
$('.agefrom_selection').change(function () {
var quantity_1 = parseInt($('.agefrom_selection').val());
var quantity_2 = parseInt($('.ageto_selection').val());
if ( quantity_1 > quantity_2 ) {
$('.age_warning').addClass('show_age_warning')
}
else {
$('.age_warning').removeClass('show_age_warning')
}
});
});
CSS
.age_warning {
display: none;
}
.age_warning.show_age_warning {
display: block;
position: relative;
float: right;
font-size: 12px;
color: #ff0000;
}
html
<form id="ageselection" method="post" autocomplete="off">
<fieldset>
<ul class="age_preference_text_box fl">
<li><label class="from_to_age_text">from </label>
<select class="age_text agefrom_selection">
<option value="18" selected>18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
</li>
<li><label class="from_to_age_text">from </label>
<p class="age_warning"> "to" age must be equal <br>or higher than "from" age</p>
<select class="age_text ageto_selection">
<option value="18" selected>18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
</li>
</ul>
</fieldset>
</form>
I expected the warning to show on every instance(or disappear). If you change the from_age dropdown, when you change the to_age dropdown, when you modify either dropdown, if you refresh the page, and if you manipulate any dropdown after a page refresh. My code is poorly written and does not work as expected.
I figured it out. The function was only written on one of the dropdown selectors. It needed to be written for both dropdown selectors. The answer will be something like:
$(function() {
$('.agefrom_selection').change(function () {
var quantity_1 = parseInt($('.agefrom_selection').val());
var quantity_2 = parseInt($('.ageto_selection').val());
if ( quantity_1 > quantity_2 ) {
$('.age_warning').addClass('show_age_warning')
}
else {
$('.age_warning').removeClass('show_age_warning')
}
});
$('.ageto_selection').change(function () {
var quantity_1 = parseInt($('.agefrom_selection').val());
var quantity_2 = parseInt($('.ageto_selection').val());
if ( quantity_1 > quantity_2 ) {
$('.age_warning').addClass('show_age_warning')
}
else {
$('.age_warning').removeClass('show_age_warning')
}
});
If anybody else can come up with something better, I am very willing to listen. Thanks
I try to develop a custom selectbox with „chosen“ (https://harvesthq.github.io/chosen/).
How can I achieve to add a single input text field ("Eigene Auflage") at the bottom of the opened select box which adds his value to the top, if someone clicks at it types something in. See image: )
Do I have to change the select/option into a ul/li ?
Here is my markup:
<select class="replace-select">
<option value="select-filled-1">Select Filled 1</option>
<option value="select-filled-2">Select Filled 2</option>
<option value="select-filled-3">Select Filled 3</option>
<option value="select-filled-4">Select Filled 4</option>
<option value="select-filled-5">Select Filled 5</option>
<option value="select-filled-6">Select Filled 6</option>
<option value="select-filled-7">Select Filled 7</option>
<option value="select-filled-8">Select Filled 8</option>
</select>
You can do this just by appending a text box to the chosen's created dropdown div, with events to add the contents of the text box to the original select. It's pretty much just a matter of using jQuery to append the box to the right element.
How it works is when you initialize chosen, it hides the select and creates a custom set of nested li's within a few divs. The dropdown div has class .chosen-drop, so you just need to use jQuery to select that element with $(".chosen-drop"), then append the text box to that using $.append(...). Your event handlers then just need to take the contents of that text box and add it to the original select.
$(document).ready(function() {
//initialize the chosen.
$("#chosenSelect").chosen({
width: "100px"
});
//append text box
$("#selectContainer .chosen-drop").append('<input class = "chosen-input"/>');
//click event for enter key
$('.chosen-input').bind("enterKey", function(e) {
//get value of text box, and add it to the select.
var newValue = $(".chosen-input").val();
//insert newValue into an option HTML with template literals
var optionHTML =`<option value="${newValue}">${newValue}</option>`;
$("#chosenSelect").prepend(optionHTML).trigger("chosen:updated");
//clear the textbox after adding to the select
$(".chosen-input").val("");
});
//watch for enter key
$('.chosen-input').keyup(function(e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
});
.chosen-input {
width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<div id="selectContainer">
<label>Press enter to add new item to select</label>
<br>
<select id="chosenSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
Let me know if you need an explanation of any elements in my example.
I am creating a tree structure using thymeleaf in a recursive way to generate the html ul and li elements. Afterwards, I transform this list into a tree using jsTree. Until there, everything is fine. Afterwards, I want to add a tooltip with html content to each element of the tree. I am trying it with qTip2 but for some reason it is only showing an empty tooltip on the root nodes (platform.projectname and platform.projectname2) and nothing at all in the children.
Has anyone done this before? Any advice will be appreciated.
HTML/Thymeleaf container for the tree:
<div id="jstree_demo_div">
<div th:fragment="submenu" th:remove="tag">
<ul>
<li th:each="node : ${nodelist}">
<span th:text="${node.path}" class="treeelement">Town hall</span>
<div class="tooltip">
Logging configuration:
<br/><br/>
<select>
<option value="trace">Trace</option>
<option value="debug">Debug</option>
<option value="info">Info</option>
<option value="warn">Warn</option>
<option value="error">Error</option>
</select>
</div>
<div th:with="nodelist = ${node.children}" th:include="this::submenu" th:remove="tag"></div>
</li>
</ul>
</div>
</div>
JavaScript:
// jsTree
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree_demo_div').jstree();
// 7 bind to events triggered on the tree
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree_demo_div').jstree(true).select_node('child_node_1');
$('#jstree_demo_div').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree_demo_div').select_node('child_node_1');
});
});
// qTip2
$(function(){
$('.treeelement').each(function(){
$(this).qtip({
content: {
text: $(this).next('.tooltip')
},
show: 'click',
hide: {
fixed: true,
delay: 2000
}
});
});
});
I made it work I guess, check this: JS Fiddle.
Try to:
move your qtip binding into loaded jsTree event to be sure it is loaded before you start binding qtip;
bind to jstree-ancor class the jsTree node has
you do not need to iterate with each
The reason for your tooltip having no text is that when building the tree jsTree rebuilds your <li> elements leaving out your .tooltip divs.
I found a way which suits better my needs, here is a JSFiddle example.
First I register the method nodeSelected to be executed when a node is selected, then I create and show the tooltip. This allows me to assign a specific ID to <select>.
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
nodeSelected(data);
})
...
function nodeSelected(data){
console.log(data.selected);
// Using getElementById since JQuery does not work well with dots in identifiers
$(document.getElementById(data.selected + '_anchor')).qtip({
content: {
text: 'Logging configuration:<br/><br/><select><option value="TRACE">Trace</option><option value="DEBUG">Debug</option><option value="INFO">Info</option></select></div>
},
show: 'click',
hide: {
fixed: true,
delay: 1000
}
});
$(document.getElementById(data.selected + '_anchor')).qtip("show");
}
I'm using AngularJs to change visibility of certain DOM elements. The visibility depends on what value was selected in a dropdownlist. More specifically, on a data-attribute of the selected option tag. I cannot populate the dropdown via AngularJs, because it's an existing ASP.NET control.
I thought about using ng-change and call a method on my controller but I'd have to pass an argument. This argument is in the DOM and not in my controller. Obviously, I'd like to keep it this way, and not access the DOM in my controller.
I've made a jsFiddle, but this is my code:
HTML
<body ng-app>
<div ng-controller="VehicleDetailsCtrl">
<select ng-model="selectedValue" ng-change="update()">
<option value="1" data-carType="Car">Car 1</option>
<option value="2" data-carType="Car">Car 2</option>
<option value="3" data-carType="Truck">Truck</option>
</select>
<div ng-hide="isTruck">
Hide if a truck was selected.
</div>
</div>
</body>
Javascript
function VehicleDetailsCtrl($scope) {
$scope.isTruck = false;
$scope.selectedValue = null;
$scope.update = function() {
$scope.isTruck = !$scope.isTruck;
// hide div here?
// but then I'd need to know the selected option,
// but I don't want to reference the DOM here.
};
}
Am I approaching this in the wrong way?
Keep in mind that I cannot let AngularJs populate the select because ASP.NET already does that for me (and I can't change that at the moment).
Also, I need both the selectedValue (for post-back and saving it to the database) and the data-carType (for changing the DOM). I don't know at runtime what the id (or value) of the Truck option is.
Use a directive to create an object of vehicle types and watch the model value of the select to update your isTruck variable:
HTML:
<select ng-model="selectedValue" check-is-truck>
JS:
var app = angular.module('myApp', []);
app.directive('checkIsTruck', function(){
return function(scope, element, attrs){
scope.vehicleTypes = {};
scope.selectedType = false;
angular.forEach(element.find('option'), function(item, idx) {
scope.vehicleTypes[item.value] = item.dataset.cartype;
});
scope.$watch('selectedValue', function() {
scope.selectedType=scope.vehicleTypes[scope.selectedValue];
scope.isTruck = scope.selectedType == 'Truck'
})
};
})
function VehicleDetailsCtrl($scope) {
$scope.isTruck = false;
$scope.selectedValue = null;
}
DEMO: http://jsfiddle.net/7ttr6/2/
You don't need ng-change to update the value because ng-model takes care of that. And in ng-hide you need to simply compare the selectedValue with the value of 'Truck' option (int 3):
<select ng-model="selectedValue">
<option value="1" data-carType="Car">Car 1</option>
<option value="2" data-carType="Car">Car 2</option>
<option value="3" data-carType="Truck">Truck</option>
</select>
<div ng-hide="selectedValue==3">
Hide if a truck was selected.
</div>
Fiddle
I am trying to get the form id when an option in a drop down is selected:
HTML
<form id="test">
<select id="option1">
<option id="opt1">Hello</option>
</select>
</form>
JS:
$("#test").change(function(){
var formid=$("test").parent("form");
alert(formid);
});
The output in the alert is "object object". I have also tried closest which gives the same output.
$("#test").change(function(){
var formid=$("test").parent("form").attr('id');
alert(formid);
});