I have a div which toggles when clicked on it.
Now my problem is when I put an option select box inside the div, whenever I want to select something the div toggles and therefor closes.
Anyway to solve this ?
HTML :
<div class="click>
<div class="red">
<select>
<option>
OPTION1
</option>
<option>
OPTION2
</option>
</select>
</div>
</div>
JQUERY :
$(".click").click(function(){
$(this).children("div").toggle();
});
Also add a click handler on the select element
$(".click").click(function(){
$(this).children("div").toggle();
});
$(".click select").click(function(event){
event.stopPropagation();
});
http://jsfiddle.net/2MkHc/
How about this logic.
1) Get the element being clicked using event.target.
2) Using .prop("tagname") get the tagname being clicked.
$(".click").click(function (e) {
if ($(e.target).prop("tagName") != "SELECT") {
$(this).children("div").toggle();
}
});
JSFiddle
Hope you like this methodology.
Related
this is my first question here on StackOverflow so please correct me if there is anything wrong with this question:
Three elements should show elements based on the what was chosen in the previous element.
I've created the following HTML/Twig structure
<div class="categorySelector border-two-pixel-solid" id="categorySelector" style="display:block; background: white;">
{{ _self.cpitems0(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
<select class="categoryElement" id="typDropdown" style="display: block;">
<option class="preselect" value="" style="display: block;">--Please choose an option--</option>
{{ _self.cpitems1(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
</select>
<select class="categoryElement" id="geraetDropdown" style="display: block;">
<option class="preselect" value="" style="display: block;">--Please choose an option--</option>
{{ _self.cpitems2(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
</select>
</div>
This Twig macro generates the options (they are provided by a PHP controller)
enter image description here
This is the jQuery code to show/hide the , assign values to it and so on
$("#typDropdown").children().click(function(e) {
e.preventDefault();
e.stopPropagation();
console.log('before cart clear');
cart.clearcart();
console.log('after cart clear');
$curElTyp = $(this).attr("data-val-two");
console.log("currentElementValue ", $curElTyp);
$("#geraetDropdown").show();
// jQuery selector is only a string
// All child categories of clicked parent child show / hide
$("#geraetDropdown").children().not("#" + $curElTyp,).hide();
$("#geraetDropdown").children("#" + $curElTyp).show();
$("#geraetDropdown").children(".preselect").show();
//curElGeraet = $("#geraetDropdown").children("#" + $curElTyp).children('a').attr('data-val-four');
//console.log('---- curElGeraet ---- ', curElGeraet);
});
After an of a "previous" has been clicked, the in the "following" stays visible although I want the Browser to show the <option class=preselect" --Please choose an option-- to show. According to the developer console, the .preselect option is display: block; but somehow it doesn't show in the field
enter image description here
How can I update the element so that the old text disappears and the new text displays?
I've found it out
Set selected option of select box
I just have to set the value to the desired element so that the shows it!
So i have an input with a dropdown underneath. So when i click into an input the dropdown opens. But i can't select anything from the dropdown cause it is not focussed. So when i click on a value it doesnt get selected and the dropdown closes again because it looses focus. So i am now wondering how i can include the div into the focus of the input.
HTML input:
<input type="text" class="form-control myInput" [(ngModel)]="textToSort"
(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}"
(focus)="focusFunction()" (focusout)="unFocusFunction()"/>
HTML div (dropdown):
<div class="data-container" *ngIf="showDropDown" style="position: absolute;" >
<p
*ngFor="let data of dataList; let i = index"
class="data-list"
(click)="updateTextBox(i,data[columnName]); focusOnInput();"
[ngClass]="{highlight:checkHighlight(i)}"
> {{data[columnName]}}</p>
</div>
Component:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
this.showDropDown = false;
}
blur event happens on your input because of mousedownon list item
So in order to prevent this you need to add
(mousedown)="$event.preventDefault()"
handler for your list items.
I created simple demo:
https://stackblitz.com/edit/angular-x3cdr1
Have you in your CSS, tried setting the z-index to 1 for the dropdown class when it is expanded?
Please share a plunkr or a stackblitz link to look at the scenario.
The simplest approach would be as follows:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
setTimeout(() => { this.showDropDown = false; }, 500);
}
I think checking this stackblitz would help also:
https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts
I have ng-repeat on a div that contains a button. Say the div repeats 5 times with 5 buttons. I want to disable the 2nd button when it is clicked. How can I disable the button at that index?
<div ng-repeat='thing in things'>
<button ng-click='clickToDisable($index)'>button</button>
</div>
Something like this. I tried ng-disabled= 'disableButton == $index but that just disables all of the buttons.
You can pass in the $event into the click function and set the disabled attribute to true, like this:
<div ng-repeat='thing in things'>
<button ng-click='clickToDisable($event)'>button</button>
</div>
And in the controller:
$scope.clickToDisable = function(evt) {
evt.currentTarget.setAttribute('disabled', 'true');
}
Here is a fiddle of it working.
I want to style a label of a select-tag in html. When the user didn't pick any
option, the color of the label should be white. If the user picked an option, the label should switch to white.
html code:
<label class="titel" for="titel">Titel:</label>
<select class="titel" name="titel">
<option value=""></option>
<option value="Proffessor">Prof.</option>
<option value="Doctor">Dr.</option>
</select>
css code:
label.titel{color: white;}
What i tried, but didn't worked:
select.titel:checked + label.titel{color: black;}
I searched and i found out, for this kind of tasks the :checked pseudoclass is helpful. I can change the label color of radio buttons or checkboxes, when checked but not the label of a select-tag when option is checked.
Thanks for your help in advance!
Edit: To make it more clear, as it mentioned #Rembrand Reyes in a comment "The drop down when blank will have Title displayed white, but when the user picks title, it will color the label black?"
As stated above in the comment by #Peter M, you can't select the previous sibling using "+". What you can do is make use of Javascript to add the CSS style for the label onchange of select option like shown below:
window.onload = function() {
var eSelect = document.getElementById('title');
var optOther = document.getElementById('title-label');
eSelect.onchange = function() {
optOther.style.color = 'black';
}
}
.titel
{
color: white;
}
<!DOCTYPE html>
<html>
<body>
<label class="titel" id="title-label" for="titel">Titel:</label>
<select class="titel" id="title" name="titel" selected="">>
<option value=""></option>
<option value="Proffessor">Prof.</option>
<option value="Doctor">Dr.</option>
</select>
</body>
</html>
The :checked pseudo selector only works with input radio and checkbox elements. It may work in some browsers when applied to the option element rather than the select, but as far as I'm aware there's no way to achieve what you're looking for across all browsers.
Might be possible with javascript though.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
display dropdown values based on previous dropdown
I know html pretty well and about forms a little bit, but would like to know, for example:
when clicking on a certain drop down list item, a certain second drop down list appears based on the previous field choice. how would you go about incorporating this, is there a specific website I can go to?
an example of code would be appreciated. I am assuming that you could use javascript for this?
do you retrieve specific values or just use different drop down lists for specific choices
Thanks
of the top of my head.
You would handle your javascript on the page, before you submit your form.
step 1. reference jquery in your header
step 2. on load, hide the second select, put this script beneath you reference jquery
<script type="text/javascript">
$(function () {
$("#secondselect").hide()
$("#firstselect").change(function () {
if($(this).val() != 0){
$("#secondselect").show()
}
else
{
$("#secondselect").hide()
}
});
});
</script>
<select id="firstselect" name="firstselect" >
<option value="0">first</option>
<option value="1">second</option>
<option value="2">third</option>
<option value="3"></option>
</select>
<select id="secondselect" name="secondselect">
<option value="0">first</option>
<option value="1">second</option>
<option value="2">third</option>
<option value="3"></option>
</select>
Of the top of my head... but i'd do it something like that.
Good luck.
Oh... just a quick update.
You could use a switch instead of an if like so, might be a bit tidier...
FROM
if($(this).val() != 0){
$("#secondselect").show()
}
else
{
$("#secondselect").hide()
}
TO
switch($(this).val())
{
case '1':
$("#secondselect").show();
break;
case '1':
//do something else... show a third dropdown instead
//for instance...
// $("#thirdselect").show();
alert('got to case 1');
//or if you use firebug or chrome, right click and inspect an element then click on Console and this log report should show
console.log('got here, showing the log');
break;
default:
$("#secondselect").hide();
}
I assume from your question that you want to dynamically populate the second dropdown based on the selected value of the first one.
To do that you can use jQuery to get the value of the first selected value pass it to a PHP file to get a response of the options that the second drop down needs to have and populate them.
You can use .show() and .hide() also to hide or show the dropdown when is needed.
$('#first').change(function(){
var selected= $('#first').val();
$.getJSON('data.php',{name: selected},function(data){
var results='';
$.each(data, function(i, item) {
results += '<option value="'+item.Description+'">'+item.Description+'</option>"' ;
});
$("select#Second").html(results);
})
});
If the options do not need to dynamically change and you just need to hide and show then you can use the simpsons88 answer!