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!
Related
I am using a select tag for a user to select a country from. When they select an option, I want to display the country code instead of the full country name. To do this, whenever a selection happens, the parent div of the select tag gets new class added to it where the content is the country code. The parent div also has a selection class added to it whenever an option is selected.
My issue is that I want to hide the selected option in the text field whenever an item is selected, but at the same time I want to be able to see the text in the list on a windows machine (select background is white) when I go to change my selection.
Is it possible for a select to only display the options in the list but not in the text field when closed?
I'm not sure I understand your question, but it sounds like you want to have a <select> field where the text shown for the "selected" option is different than what appears in the dropdown list of the <select> field?
If so, you could take advantage of the fact that a <select> element can be invisible but still display its dropdown <option> list normally. By styling your element with <select style="position:absolute; opacity:0"> and positioning it over another element you want to use to display the "selected" value, you can display something different when an option is selected.
A quick proof-of-concept example:
function changeLabel(select) {
document.getElementById('field-label').innerHTML = select.value;
}
#field {
position: relative;
display: inline-block;
border: 1px solid black;
}
#field-label {
color: blue;
}
#field-select {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
<div id="field">
<div id="field-label">Click To Select</div>
<select id="field-select" onchange="changeLabel(this)">
<option value="" disabled selected>Select A Country</option>
<option value="CAN">CAN - Canada</option>
<option value="MEX">MEX - Mexico</option>
<option value="USA">USA - United States</option>
</select>
</div>
I have two multi-select lists that have objects that can move between the two. I would like to show visually the movement/flow of items when they are moving from two multi-select lists.
The two lists are side by side. (One on the right and one on left)
If I move x number of objects from the right to the left, I want the background color to be red (showing removal) for those objects. If objects move from left to right, they are added so should be green. The ones that do not move should stay white background.
How can I go about this?
<div>
<label>Current Keywords:</label>
<div>
<select multiple size="8" ng-model="selectedCurr" ng-options="keyword in selectedKeywords"></select>
</div>
</div>
<div>
<input id="moveRight" type="button" value=">" ng-click="moveItem(selectedCurr, selectedKeywords, availableKeywords)"/>
<input id="moveLeft" type="button" value="<" ng-click="moveItem(selectedAvailable, availableKeywords, selectedKeywords)"/>
</div>
<div>
<label>Available Keywords:</label>
<div>
<select multiple size="8" ng-model="selectedAvailable" ng-options="keyword in availableKeywords"></select>
</div>
</div>
$scope.moveItem = function(items, from, to) {
angular.forEach(items, function(item) {
var idx = from.indexOf(item);
from.splice(idx, 1);
to.push(item);
});
$scope.selectedCurrent = [];
$scope.selectedAvailable = [];
};
You can use ngStyle or ngClass, depending on your needs
https://docs.angularjs.org/api/ng/directive/ngStyle
https://docs.angularjs.org/api/ng/directive/ngClass
In my case I had to set a different background depending on an attribute, so I made it generate the color in the back-end and it worked pretty well
<tr ng-style="{'background-color': x.color }" ng-repeat="x in reparaciones | filter: filter4">
Ng-class worked best for me but I was running into the issue from How to use ng-class in select with ng-options
In order to work around this, I could not use ng-class and ng-options in a select so I change it to be a select with an option inside it.
.green{
background: 'green;
}
<select size="8" multiple ng-model="selectedCurr">
<option ng-repeat="keyword in selectedKeywords" ng-value="keyword" ng-class="{green: keyword.color.selected}">{{keyword.name}}</option>
</select>
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.
Im trying to make a dropdown. U have to search on the package number and you will get the detailed information so you can immediately see the correct price or sizes for that package.
<div class="choosePackage">
<label>
<span>Package nr</span>
<span>m3</span>
<span>Size LxWxH</span>
<span>Price</span>
<span>Discount</span>
</label>
<select>
<option value="">
<span class="optPackage"><strong>5528</strong></span>
<span class="optM3">9m3</span>
<span class="optLWH">1.00x2.00x3.40m</span>
<span class="optPrice">€70,00</span>
<span class="optDiscount">€280,00</span>
</option>
</select>
</div>
I made something like this, but you can't split the option.
This is what I want to achieve
I was working on a solution, but have to run into a meeting. This should give you a basic idea however. Basically, you need to use JS to overlay a styled dropdown which will be linked to the actual drop down. Then you can style things to be different with in each option.
Start by creating your drop down select
You will want to make all the text as a single drop down
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="basic">$100 Basic Package 3 Months</option>
<option value="upgraded">$500 Upgraded Package 6 Months</option>
<option value="expert">$1000 Expert Package 12 Months</option>
</select>
Then you theoretically, jump through hoops using Javascript
Here you will need to cache your options, then hide the select to show your styled div.
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
Now you will want to cache your styled div, and append some child elements into your div
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
html: $this.children('option').eq(i).text()
.split(' ').join(' <span style="color: red; font-weight:100;">'),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
You will want to use your for loop to append styling onto certain parts of your drop down. I have a basic mock up for you to check out as well.
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.