In my Django app (using {% load crispy_forms_tags %}) I have a following dropdown menu:
<div id="div_id_report_division" class="form-group">
<label for="id_report_division" class=" requiredField">Test<span class="asteriskField"></span</label>
<div class="">
<select name="report_division" class="select form-control" required="" id="id_report_division">
<option value="" selected="">---------</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select> </div> </div>
I wish to remove option number 5 on page load. My Javascript on post.html with everything is:
<script type="text/javascript">
function on_load(){
/*
option 1.:
document.querySelector('id_report_division option[value=5]').remove();
option 2.:
var x = document.getElementById('id_report_division');
x.remove(5);
option 3.:
document.querySelector('#id_report_division option[value=5]').remove();
const first = document.querySelector("[id='id_report_division']");
*/
document.querySelector("[id='id_report_division' option[value=5]]").remove();
}
on_load();
</script>
How can I easly remove this option? It would be better if I could remove option where text is E, in case that value changes. But there will always be only one text 'E', no need to itterate.
You can iterate the select options list, check the inner text and remove like so:
var selectobject = document.getElementById("id_report_division");
for (var i=0; i<selectobject.length; i++) {
if (selectobject.options[i].text == 'E')
selectobject.remove(i);
}
Related
I can see the list of components normally but when I use the "Add more" functionality it refuses to load the data. Any idea why?
Normal select which loads data from for loop (HTML page):
<select name="component" data-live-search="true" id="component" class="form-control" title="Dropdown field">
{% for i in component %}
<option value="{{i.id}}">{{i.name}}</option>
{% endfor %}
(Inspect page)
<select name="component" data-live-search="true" id="component" class="form-control" title="Dropdown field">
<option value="2">test2</option>
<option value="3">sdf</option>
<option value="4">qwerty</option>
<option value="5">qwerty</option>
<option value="6">example</option>
</select>
Now I'm dynamically creating fields using createElement and setAttribute
(HTML page)
var field = document.createElement('select');
field.setAttribute('name','component');
field.setAttribute('data-live-search','true');
field.setAttribute('id','component');
field.setAttribute('class','form-control');
field.setAttribute('title','Dropdown field');
survey_options.appendChild(field);
But this does not contain the data from the for loop similar to the normal select function. Am I missing something?
(Inspect page)
<select name="component" data-live-search="true" id="component" class="form-control" title="Dropdown field"></select>
You need to create dynamic element with different id and append the options from rendered element. Check the below snippet
function appendNewDynamicComponent() {
var survey_options = document.querySelector("#survey_options");
var field = document.createElement('select');
// Create a random number
var random = +(Math.random() * 1e5).toFixed(0) + Date.now();
field.setAttribute('name', 'component');
field.setAttribute('data-live-search', 'true');
// Append random number to id to make it unique for newly created element
field.setAttribute('id', 'component_' + random);
field.setAttribute('class', 'form-control');
field.setAttribute('title', 'Dropdown field');
survey_options.appendChild(field);
// Below two lines would update the options for dynamicay created elements from the already rendered element
field.innerHTML = document.querySelector('select#component').innerHTML;
field.selectedIndex = -1;
}
#survey_options [name="component"] {
margin: 8px;
}
<div id="survey_options">
<select name="component" data-live-search="true" id="component" class="form-control" title="Dropdown field">
<option value="2">test2</option>
<option value="3">sdf</option>
<option value="4">qwerty</option>
<option value="5">qwerty</option>
<option value="6">example</option>
</select>
</div>
<br/>
<button onclick="appendNewDynamicComponent()">
Add Dynamic Component
</button>
I have two select options :
<select id="Living things">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="Compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
Consider the first options from both the drop downs are default. Now imagine I selected 'Animals' from first and 'less' from second. Now if I change the first to 'Plants' then the second list should be reset.i.e,
<option>Any</option>
<option>less</option>
<option>greater</option>
Please help in this.Thank You.
<select id="livingThings" onchange="reset();">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
<script src="test.js"></script>
livingThings = document.getElementById('livingThings');
compare =document.getElementById('compare');
function reset(){
if (livingThings.selectedIndex != 0){
compare.selectedIndex = 0;
}
}
You can add an event listener for the first select element whenver it changes then reset the value of the second select element to its default, note that IDs can not have white spaces, I have added a dash to it
document.querySelector("#Living-things").onchange = function() {
let select = document.querySelector("#Compare");
select.value = select.children[0].value;
}
<select id="Living-things">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="Compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
I am trying to get the selected option in multiple select, I can get the value in the form of an array, but I can't get the text of the option.
$(function() {
$('#sizeAddCategory').change(function(e) {
var selected = $(e.target).text();
console.log("selected " + selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
On $(e.target).text(), I am getting all the options text, I need the text of only selected options, so I can display it in the textarea.
Using .text() on a select will give the text of the control - i.e. all of the options, not just the selected ones.
To get the selected text (not value as you pointed out you can already get), you can use:
$(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
Here, $(this).find("option:checked") will give you the option elements that have been selected while the .map will return the .text() for each of those values into a jquery array, with .toArray() to convert to a normal js array.
$(function() {
$('#sizeAddCategory').change(function() {
var selected = $(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
console.log("selected", selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
It's because the target that you're defining is in the select tag. Instead of using:
$('#sizeAddCategory').change(function(e) {
use:
$('.option-category').click(function(e) {
and add a class in the options:
<option value="{{$size->id}}" class="option-category">{{$size->name}}</option>
you write :
var selected = $(e.target).text();
you should get the value of selectbox and
you should write
var selected = $(e.target).val();
oh my god
i right now understand what did you mean
ok
write :
$("#selectBox").change(function(e){
var x = $(e.target).find("option:checked").text();
console.log(x);
});
It's my first contact with js so please don't hate me
I have something like this:
function Zmiana(isChecked) {
document.getElementById('test').type = 'text';
}
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select> <br>
</div>
But it doesn't work
You won't be changing the select into a textbox. Instead, you'll have both a select and a textbox. The checkbox will simply determine which is shown.
Also, your select should include a first choice that is not considered valid so that you don't get a submitted value that the user didn't choose.
.hidden { display:none; }
<input type="checkbox" id="check">Check to enter text directly
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="">--- Choose ---</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select>
<input id="data" class="hidden">
</div>
<script>
let text = document.getElementById('data');
let check = document.getElementById("check");
let select = document.getElementById("test");
// You must set up your function to handle the
// click event of the checkbox
check.addEventListener("click", Zmiana);
function Zmiana(){
// Add or remvoe the hidden class based on
// whether it's already in use
select.classList.toggle("hidden");
text.classList.toggle("hidden");
}
</script>
I want to make it if you pick something in dropdown list except Condition, it will search all elements for that and show them.
my jquery:
$('#searchbtn').click(function(){
var e = document.getElementById("condition");
var strUser = e.options[e.selectedIndex].value;
$('.item').each(function(){
var itemcondition = $('.condition').html();
if (itemcondition === strUser.toLowerCase()){
$(this).show();
}
if (itemcondition !== strUser.toLowerCase()){
$(this).hide();
}
});
})
my html:
<select id="condition">
<option>Condition</option>
<option value="factory new">Factory New</option>
<option value="minimal wear">Minimal Wear</option>
<option value="field tested">Field Tested</option>
<option value="well worn">Well Worn</option>
<option value="battle scarred">Battle Scarred</option>
</select>
this is how element looks like:
<div class="item" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
Here is how you can fix it.
Your html attribute and javascript code should be changed. You should give option value with ID/slug of condition of your products -- it shouldn't have space as we will manage this data easier in the next step.
<select id="condition">
<option>Condition</option>
<option value="factory-new">Factory New</option>
<option value="minimal-wear">Minimal Wear</option>
<option value="field-tested">Field Tested</option>
<option value="well-worn">Well Worn</option>
<option value="battle-scarred">Battle Scarred</option>
</select>
and your products list should classes corresponding your selected option value like this.
<div class="item factory-new field-tested" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
And your javascript should be changed almost entirely. It's much easier to understand.
$('#searchbtn').click(function() {
var $condition = $("#condition");
var condition = $condition.val();
$('.item').hide();
$('.item.' + condition).show();
})
hope it helps.