I'm creating a universal text template tool for work and I need a little help with getting the appropriate template to show up when a drop down menu is changed.
I'm using JavaScript, no JQuery for me yet.
The template objects are divs, and they are supposed to change by setting display: none on all but the one the menu has selected.
The problem: The templates (divs) never change.
Fiddle
Thank you for looking!
There are multiple problems with the script.
Problems
1. caseSelect was pointing to the object instead of value (var caseSelect = document.getElementById("caseType").value;)
2. In the select element all options had the value thing1
3. break statement was missing at the end of each case
Demo: Fiddle
Related
I'm using a ng-select dropdown to dynamically search the data.
The only issue is that the content is not visible when you click the down arrow once the search result is discovered, even though I was able to implement the search as planned.
https://stackblitz.com/edit/base-angular-12-app-xtmcpu
Steps to reproduce:
step 1: click on search box
step 2: search a number, for eg : 1
step 3: click down arrow
Please help me on this. Thanks in advance.
As per what I can understand, it seems that this the style that you applied in the html that interfers with the size of the elements being displayed underneath the input (after removing it: https://stackblitz.com/edit/base-angular-12-app-aecymo)
This is actually the default behavior of ng-select. You can bypass it by removing your style or by applying custom style to the items.
I'm trying to create a dropdown menu with jSuites that fires a function once one of the items in the list is selected.
Unfortunately, I can't figure out how to fire the function. I tried with "onchange" both as attribute of the <div> and within the definition fo the jdropdown, but nothing seems to work.
I attach a fiddle here with a dropdown menu made with that works and does what it should, and two jSuites menus that should behave in the same way but they don't...
What am I doing wrong?
Can this be done at all?
Any help is welcome...
http://jsfiddle.net/2x4qnj1h/1/
use that instead:
onchange: refresh_dropdown,
you used a literal, not a function.
Documentation with examples : https://jsuites.net/v4/dropdown-and-autocomplete/events
https://codesandbox.io/s/dreamy-shadow-eizt3?fontsize=14&file=/src/Panel.js
Please refer above example.
I want to add dynamically panels.Currently adding only one and after that if i press add, it is not adding.
Each panel must be a remove button by click that, user can remove that panel.
Please help in this, I really appreciate your effort
You should assign the points to your arr variable in addPoint function to append the panels. I added some stuff to make expanded and onChange working dynamically with the panel indexes. You can check out my changes codesandbox.
See the following Plunker:
https://plnkr.co/edit/gLFw26zoJeaM5qtPjCFg?p=preview
I have an element <sc-chart type="approved"></sc-chart> that hooks into the scChart directive to add a chart to the page (I've omitted that part of the code since that's not pertinent to this issue). After adding the chart I then want to create a group of buttons next to the chart populated with the names array (this array will not be static, it will be the result of a service call, so I can't hardcode the buttons).
I'm able to add the buttons okay and make them clickable. I'm even able to highlight them when they're selected. However, I'm having a hard time figuring out how/when to remove the "active" CSS class, when I've clicked away from the button. It may be something pretty simple I'm missing.
just add removeClass() function:
btn.on('click', {name: i}, function(event) {
$('.pill-btn').removeClass('active');
$(this).addClass('active');
alert(event.data.name);
});
plunker: https://plnkr.co/edit/6Nj4beNuJf1plZmPAs0z?p=preview
I am experimenting with select2 by adding custom tags to it.
I do this with this code:
$(".js-example-basic-multiple")
.on("select2:selecting",
function() {
e.params.args.data.text = parentTarget + e.params.args.data.text;
});
I am using the multiple attribute BUT i am using the optgroup elemnt of the select list and it acts as a parentId container where only one element per container can be selected. This is solved but what i can not do is remove "MycustomTag" from previous selected option.
MycustomTag is either
Users
Or
Tank
And when selecting a new option i want to remove the Tank/Users tag on the previous selected option. In my debuging process i found that this is getting overriden in the change event but I can't figure out how to stopp it.
the code is pretty huge so I created a fiddle
How can I remove the tag that I am setting?
After some extensive detective work I found a very simple answer...
$(this).data().data.text = $(this).data().data.text.replace(parentTarget, "");
fiddle has been updated