Currently I want to implement drop-down list with multiple group selection checkbox but could not find the exactly one. It is something similar to this : multiple select. But unfortunately, mine has multi level parent and child as this image :
This is the structure of the code :
<select id="ms" multiple="multiple">
<option value="1">Parent 1</option>
<option value="2"> > Child 1</option>
<option value="2"> > Child 2</option>
<option value="4">Parent 2</option>
<option value="5">Parent 3</option>
<option value="2"> > Child 1</option>
<option value="2"> > Child 2</option>
<option value="2"> > Sub Parent 3</option>
<option value="2"> >-> Child 1</option>
<option value="2"> >-> Child 2</option>
</select>
I don't use <optgroup> because I don't want to modify the structure of the code since all the code of the dropdown list is the structure that received from server side.
When all the children are selected, the parent would be selected too.
When all the children are selected, there should be only parent's name that showed in the selected filed.
If one of children is deselected , then the parent would be deselected too.
The sub level should work as the 1st level as well.
Is there any recommend plugin jquery for this?
Any answer would be appreciated.
This is totally messed up, but you can always try to do this way:
Find the posision of check option by getting its position on a list like in this post
Make all if/else statments which requires:
Get the possition of my parent
and if all my siblings are checked: check my parent and get rig of all other scopes
Related
I have a sidebar form on the number of pages with <select> dropdown in it. Each of these pages tells about a specific option of this dropdown. What I want to achieve is that when I am on a page about Option 1, I get Option 1 selected. When on the page about Option 2 — Option 2 is selected by default in my list. When on the page about Option 3 — Option 3 is selected by default etc. The dropdown looks like this:
<select>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
All the pages have their unique classes, that contain page ids like this postid-2502, so I guess I can do something like "if this class met, select this option", but is there a nicer desicion? I have ~25 options.
Also I can't change <select> HTML or anything as it is a plugin's dropdown. I use Contact Form 7 plugin on Wordpress website.
You could put a data attribute on each <option> that matches the unique post id class or some other id source for the post and use filter() to match on page load
// IIFE for wordpress to allow using $
;(function($) {
$('#mySelect option').filter(function() {
return document.body.matches('.post_id_' + this.dataset['pid']);
}).prop('selected', true);
})(jQuery);
<body class="post_id_67">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect">
<option value=""> --- </option>
<option data-pid="5" value="Option 1">Option 1</option>
<option data-pid="67" value="Option 2">Option 2 - Should be selected</option>
<option data-pid="44" value="Option 3">Option 3</option>
</select>
</body>
selectElement.value = 'Option 1'; for page 1, selectElement.value = 'Option 2'; for page 2 selectElement.value = 'Option 3'; for page 3.
With regular html select menus, if you create an option element with selected and disabled attributes and give that option text, then that text will display in the select menu by default. Here is basic html:
<select name="myname">
<option selected disabled>Select one...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
This is what pages looks like:
But in the below isolated code, I demonstrate that Angular is intrusively not showing the option text:
https://github.com/lovefamilychildrenhappiness/DropDownNoShowDefaultValue
// app.component.html
<h1>Select Box does not show default value: </h1>
<app-select-box
[options]="collection"
></app-select-box>
// select-box.component.html
<select
[value]="value"
[disabled]="disabled">
<option selected disabled value="">Select one...</option>
<option *ngFor="let option of options">{{option}}</option>
</select>
What is causing Angular to disrupt the native html behavior of select boxes?
This is because your select value is bound to a variable called value which is undefined initially. As per the html, there is no option with a value of undefined, so nothing gets selected. Your Select one... option has an empty string value. So to fix this, initialize value in your component to an empty string.
value: string = '';
just put the option to be selected in the first place.
<option value="0">value to be selected<option>
<option value="1">next<option>
<option value="2">Continues<option>
I have a tough time with Materialize CSS and Select compoment.
Code goes like this:
<select id="selectCompId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
When i visit the form i always get either value 1, 2 or 3 based on some DB query. Now, if i get 2 i want to set selected on option number 2 as initial selection. I'm having issues doing so.
Tried doing this:
document.getElementById('selectCompId').value = '2' but it seems like it doesn't work with this materialize component or i'm doing it wrong.
Whole code can be found here:
https://jsfiddle.net/536Lu1xe/1/
Expected result:
Initial value set to desired value (let's say 2 in this case).
Solution -> https://jsfiddle.net/536Lu1xe/2/
At the bottom, under script tags:
var elem = document.querySelector('#selectCompId');
var instances = M.FormSelect.init(elem);
document.querySelector('#selectCompId option[value="2"]').setAttribute('selected', 'selected');
M.FormSelect.init(elem);
If I understand correctly, you want to programmatically select an option in a select box.
In order to do that, we have to select all the options in a select box and select the desired option. The challenge here is to define the option that needs to be selected. In this case, I'm using the index for this.
Let's see how that looks like in code.
let n = 1; // the index of the option that needs to be selected. In this case, we want to select Item 2 (the option at index=1)
// the following line will select the <select/> on the page
const select = document.querySelector('select');
// now we have to loop through all options and select the one at Index=1
select.querySelectorAll('option')[n].selected = true;
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
You need to add selected attribute to select:
<select>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
EDIT:
You'll also need to re-initialize Select after updating the value:
const elem = document.getElementById('select_id');
M.FormSelect.init(elem);
When creating dropdowns with Semantic UI in a select tag. If the value of an option is the same as the text of a different option, the last option child will be the one selected. Regardless of the option that is selected.
HTML:
<select class="ui search dropdown">
<option value="">Please select</option>
<option value="a" selected>This is option A</option>
<option value="b">This is option B</option>
<option value="c">a</option>
<option value="d">This is option D</option>
</select>
JS:
$('.dropdown').dropdown();
The selected value should be a => "This is option A", but instead value c => "a" is selected.
I have tried different settings and options for the dropdown with no success. Am I missing something or is this a problem with Semantic UI?
Fiddle
I'm looking for guidance on the following scenario:
Context: A page displays a dynamically generated list with X (changes based on the user) number of items, each formatted as follows:
<div class="dashboard_section_item">
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div> Edit
<label for="add_listname_label">Assign to list</label>
<br/>
<select name="mod_list" class="mod_list">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="hidden" name="prod_uid" class="prod_uid" value=”55872761">
</div>
1st issue: Need to show a modal div on top of a product div when the user clicks on a specific item Edit link.
Current code: It seems I have to specify a unique ID for each modal so it knows which item it is associated with. What I have done(see above) is add the item uid to the id and href tags when the list is generated so it’s mapped accordingly for each item which works fine.
Is there a better way to to this?
If I'm understanding you, something like this should do:
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div>
<a class="someClass" href="#openModal_55872761">Edit</a>
$(document).on('click', 'a.someClass', function() {
$(this).prev('.modalEdit').modal('show');
});