I'm working on my 1st personal project. I have a multi-selection box in a form page and I am trying to figure out the best way to show the selections made in the multi selection box right underneath the box in a list. Thanks in advance!
<select
id="selectcrim"
multiple="multiple"
onchange="showResults(this, event)"
size="10"
>
<option selected>None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<ul id="selectedresults"></ul>
function results(element, event) {
let result = document.getElementById("selectedresults");
while (result.firstChild) result.removeChild(result.firstChild);
let values = [];
for (const i = 0; i < element.options.length; i++) {
if (element.options[i].selected) {
let li = document.createElement("li");
li.appendChild(document.createTextNode(element.options[i].value));
result.appendChild(li);
}
}
}
I expected the selected results to appear in list form underneath the multi-box however nothing seems to happen.
Related
Tell me please, there is a code in which when you click option select, a div element is added with an option value.
But there is a problem, which is that you cannot immediately click on the first option, you must first click on the second, and only after the first. How to fix this problem?
Thank you in advance.
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
var div = document.createElement('div');
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"><input name="my_input"></div>
</form>
In html dropdown you can not able to select a value which already selected, so must need to add one more option in your dropdown which say "Please Select" and after that you can able to select any option. That's the right solution
See working example:-
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
if(!new_input.value) return false;
var div = document.createElement('div');
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="">Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"><input name="my_input"></div>
</form>
This happens because you done it with onchange event so the first option is already selected thats why first time it doesn't add div so for overcome that just add one more option to html like
<select id="selector" onchange="add_input_from_select(this)">
<option value="">select Option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
and put condition in javascript like,
if(document.getElementById("selector").value != ""){
//add your div here
}
this condition must apply because when you select first option it did not be added like select options.
I have created a dropdown box with 3 options on my website.
I want to change some text on the webpage, depending on the drop-down item selected. For example:
If dropdown option 1 is chosen, I would like some text on the page that says "You have chosen option 1".
I don't know any JavaScript and so I haven't tried anything apart from trying to search for a similar solution.
<select name="os0" style="background: #315d80; color: #fff; border-color: white; border: 0px;">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>
Full sultion with jQuery (I started typing it before you added the HTML to your question so the options are italian car brands).
https://jsfiddle.net/mL2c2xb6/
HTML:
<select id="carSelect">
<option></option>
<option value="Audi">Audi</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
</select>
<p id="choiceDisplay">
Selection Display
</p>
Javascript:
$('select').change(function(){ // Listen to changes to <select> element
const options = $("option"); // Get all the <option> elements.
let selectedOption = ""; // Var to store selected option value.
options.each(function(index){ // Iterate through option elements.
let option = options[index];
if($(option).prop("selected")) { // Find the seletced one.
selectedOption = $(option).val(); // Get the value and store it
};
});
$("#choiceDisplay")
.empty()
.append(selectedOption); // Display the result.
});
var e = document.querySelector('[name="os0"]');
var strUser = "";
e.addEventListener("change", function(){
strUser = e.options[e.selectedIndex].innerHTML;
alert("You have chosen " + strUser);
});
Currently I have a function I created that removes some options from a select menu based on a value passed from another select. I want to revert back to normal each time the function is called (add all the original options back)
HTML
<select id="Current-Tier" onchange="removetier();" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500">Diamond</option>
</select>
<select id="Desired-Tier" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500">Diamond</option>
</select>
JS
function removetier(){
var currentTierValue = document.getElementById("Current-Tier");
var current = currentTierValue.options[currentTierValue.selectedIndex].value;
var desiredDivisionValue = document.getElementById("Desired-Tier");
for(var i=0;i<desiredDivisionValue.length;i++){
if(desiredDivisionValue[i].value < current){
desiredDivisionValue.remove(desiredDivisionValue[i]);
}
}
Update_Desired_Rank_image();
}
Have you considered adding the hidden attribute rather than deleting them?
Then the next time you receive a request, you can go through the list programmatically and remove the hidden attribute from each option.
An example of the hidden label, BTW, is
<select id="Desired-Tier" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500" hidden>Diamond</option>
</select>
If you run it you will see that Diamond is hidden. This way you always have access to all your options.
You can easily iterate over the select input and either store the removed items in an array or leverage the hidden attribute on the option tag:
Fiddle: https://jsfiddle.net/gLwwmh82/2/
HTML
<select id="mySelect">
<option value="">Select...</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
<option value="test5">Test5</option>
<option value="test6">Test6</option>
</select>
<button id="btnRemove" onclick="remove()">Remove Half of Entries</button>
<button id="btnReset" onclick="reset()">Reset</button>
JS
function reset() {
var select = document.getElementById('mySelect');
var options = select.querySelectorAll('option');
for (var i = 0; i < options.length; i++) {
options[i].removeAttribute('hidden');
}
}
function remove() {
var select = document.getElementById('mySelect');
select.value = "";
var entries = select.querySelectorAll('option');
for (var i = 1; i < 5; i++) {
// Wrap the below line in your logic to know what to delete/not to delete
entries[i].setAttribute('hidden', true);
}
}
how do I get my javascript to show more than one selected in de text field I am planning on adding way more 's so I don't want to make a insane long array
function myFunction() {
var skilllist = document.getElementById("skilllist");
console.log(skilllist.selectedIndex);
document.getElementById("skillfield").value = skilllist.options[skilllist.selectedIndex].text;
}
<form>
Select your favorite browser:
<select name="skillist[]" id="skilllist" multiple>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
<option value="Laravel">Laravel</option>
<option value="Wordpress">wordpress</option>
</select>
<p>jouw skills zijn: <input type="text" id="skillfield" size="50"></p>
</form>
</div>
I suggest adding an event handler on blur event to the select element.
With such an approach you are able to select one or more list items and dynamically render their text content.
document.getElementById("skilllist").addEventListener('blur', function(e){
var options = e.target.options,
selected_content = "";
for (var i = 0; i < options.length; i++) {
if (options[i].selected) selected_content += options[i].textContent + ", ";
}
document.getElementById("skillfield").value = selected_content;
});
https://jsfiddle.net/zLyw7vhd/
For mobile devices : try to replace event name 'blur' to 'focusout'
(or 'change') in addEventListener function
I have two dynamically populated selectboxes with data coming from same json object within the page. What I want to achieve is to link the two boxes so that whenever there is a change in one select box the same option in other select box gets automatically disabled.
So suppose Xiomi and the corresponding second value Xiomi Redme is selected in first selectboxes then the same option Xiomi Redme should not be available for selection in the other select box
<div>
<select id="brand-select" name="Brand">
<option value=''>Select Brand</option>
<option value='300'>Xiomi</option>
<option value='147'>HTC</option>
</select>
</div>
<div>
<select id='mobile_model_select' name='Mobile_Brand_Models' style='width:208px;'></select>
</div>
<div>
<select id="brand-select_product2" name="Brand">
<option value=''>Select Brand</option>
<option value='300'>Xiomi</option>
<option value='147'>HTC</option>
</select>
</div>
<div>
<select id='mobile_model_select_product2' name='Mobile_Brand_Models_For_Product2' style='width:208px;'></select>
</div>
Here is my jquery code
$(document).ready(function(){
var modelData = {
"300":{
"MI3_16GB":"XIAOMI Mi3 (16GB)",
"REDMI_NOTE":"XIAOMI REDMI NOTE",
"REDMI":"XIAOMI Redmi ",
"REDMI_1S":"XIAOMI REDMI 1S"
},
"147":{
"ONE_M8":"HTC One (M8)",
"DESIRE_610":"HTC Desire 610",
"ONE_E8":"HTC ONE E8"
}
};
$('#brand_select').change(function(){
correspondingId = $(this).find(":selected").val();
var correspondingIdObject = modelData[correspondingId];
$('#mobile_model_select option').remove();
$.each(correspondingIdObject, function(key, value){
$('#mobile_model_select').append($("<option>").text(value).attr('value',key));
});
$('#brand_select_product2').change(function(){ //
correspondingSelectedIdObject = $(this).find(":selected").val();
$('#mobile_model_select_product2 option').remove();
$.each(correspondingSelectedIdObject, function(key, value){
$('#mobile_model_select_product2').append($("<option>").text(value).attr('value',key));
});
});
My problem is how to link the two onchange functions so that whenever the value is changed in one the same option in the other select box is disabled.
for (var i=0; i<selects.length; i++) {
$(selects[i]).find('option').removeAttr('disabled');
for (var j=0; j<vals.length; j++) {
$(selects[i]).find('option[value='+vals[j]+']').attr('disabled', 'disabled');
}
}
have a look at this fiddle .. hope this helps u ...
JSFiddle
credits : #Skwal