below I attached some piece of code from https://semantic-ui.com/modules/dropdown.html: (Multiple Selection)
<select name="skills" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
<option value="ember">Ember</option>
<option value="html">HTML</option>
<option value="ia">Information Architecture</option>
<option value="javascript">Javascript</option>
<option value="mech">Mechanical Engineering</option>
<option value="meteor">Meteor</option>
<option value="node">NodeJS</option>
<option value="plumbing">Plumbing</option>
<option value="python">Python</option>
<option value="rails">Rails</option>
<option value="react">React</option>
<option value="repair">Kitchen Repair</option>
<option value="ruby">Ruby</option>
<option value="ui">UI Design</option>
<option value="ux">User Experience</option>
</select>
The question is:
Is it possible to show short names of chosen options ? I mean something like:
Options are: keyboard, mouse, monitor, laptop
After chosing options keyboard, mouse shown are: K, M
Is it possible to do it?
I am not familiar with angular or semantic, but it is fairly easy using vanilaJS. You are welcome to test this code on semantic-ui website. Choose to items in the multi-select section then run this in the console:
var items = document.querySelectorAll(".ui.label.transition.visible");
items.forEach(function(item){
var icon = document.createElement("i");
icon.className = "delete icon";
item.innerText = item.innerText[0];
item.appendChild(icon);
});
For sure to use it with angular you would like to modify my code but that is one possible approach.
Related
I am trying to get the selected item from a pull down list. I am using the following code to attempt to get the item selected. However, no matter what is selected in the pulldown menu (it has a checkmark indicating it is selected) I only get the first room listed (in this case "testing) and not the selected one. Why would this happen?
Here is what I am using to select -
var value = $(".room").val()
Here is the html code of the list:
<select>
<option class="room" value="testing">testing</option>
<option class="room" value="hello">hello</option>
<option class="room" value="lobby">lobby</option>
<option class="room" value="this is a test room">this is a test room</option>
<option class="room" value="gabe and samsons cave">gabe and samsons cave</option>
<option class="room" value="gabe">gabe</option>
<option class="room" value="rfe2209">rfe2209</option>
</select>
You're selecting the value wrong. Only the <select>'s value will have the value of the selected <option>. Here's an example of working code:
$('#room').change(function() {
const value = $('#room').val()
console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="room">
<option value="testing">testing</option>
<option value="hello">hello</option>
<option value="lobby">lobby</option>
<option value="this is a test room">this is a test room</option>
<option value="gabe and samsons cave">gabe and samsons cave</option>
<option value="gabe">gabe</option>
<option value="rfe2209">rfe2209</option>
</select>
I have a list of options in my select tag, and one of them has the selected attribute. When you click on the option, it opens the select dropdown and scrolls down to the option with that selected attribute, like so.
Dropdown One
Is there a way to have it so when you click the select dropdown, it doesn't scroll at all like so, without removing the selected attribute?
Dropdown Two
Here is my code.
<select id="number_id">
<option value>Select</option>
<option value="A">1</option>
<option value="B">2</option>
<option value="C">3</option>
<option value="D">4</option>
<option value="E">5</option>
<option value="F">6</option>
<option value="G">7</option>
<option value="H">8</option>
<option value="I">9</option>
<option value="J">10</option>
<option value="K">11</option>
<option value="L">12</option>
<option value="M">13</option>
<option value="N">14</option>
<option value="O">15</option>
</select>
I must have missed something very trivial, but I cant figure it out.
The select below shows 5 options (as expected), but I cant get access to option 6 and 7. The scrollbar is shown, but the browser doesnt allow me to move it down
<select size='5' multiple name='driver[]'>
<option value= >(No Driver Filter)</option>
<option value=drivername=''></option>
<option value=drivername='alex'>alex</option>
<option value=drivername='marc'>marc</option>
<option value=drivername='frank'>frank</option>
<option value=drivername='james'>james</option>
<option value=drivername='michael'>michael</option>
</select>
I think your code is not well formatted . You should use double quotes for attribute values.
<select size="5" multiple="multiple" name="driver[]">
<option value="" >(No Driver Filter)</option>
<option value="drivername=''"></option>
<option value="drivername='alex'">alex</option>
<option value="drivername='marc'">marc</option>
<option value="drivername='frank'">frank</option>
<option value="drivername='james'">james</option>
<option value="drivername='michael'">michael</option>
</select>
I want to make the contains of a second drop down menu dependent on what is selected in the the first. In my case wish to do it for a car selection option. i.e when the car make is selected this then populates the model drop down menu with the relevant models.
As there are a lot of makes of car I would like to keep it concise if possible I presume arrays of models for each make is the solution but how do implement this.
I have look at various solutions and cannot find a suitable answer to this, any suggestions/examples would be gratefully appreciated.
I am using jsp.
Make:<select>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
</select>
You could do it with some simple JS and css ( here is a JSFiddle: http://jsfiddle.net/N7Q57/1/)
Make:
<select name="cars" id="cars">
<option selected value="Choose">Choose</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="Toyota">Toyota</option>
</select>
<div id="brands">
<select class="audi">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="bmw">
<option value="3">3</option>
<option value="4">4</option>
</select>
</div
the jQuery
$("#cars").change(function () {
var string = "";
string = $("select#cars option:selected").text();
if (string == "Audi"){
$("#brands .bmw").hide();
$("#brands .audi").show();
$("#brands").show();
} else if (string == "BMW"){
$("#brands .audi").hide();
$("#brands .bmw").show();
$("#brands").show();
}
})
and the CSS:
#brands{
display: none;
}
In an HTML select element, is it possible to have the second option selected by default?
<select class="styled" onchange="location = this.options[this.selectedIndex].value;">
<option value="9u.html">Team 9u</option>
<option value="10u.html">Team 10u</option>
<option value="11u.html">Team 11u</option>
<option value="12u.html">Team 12u</option>
<option value="13u.html">Team 13u</option>
<option value="14u.html">Team 14u</option>
<option value="15u.html">Team 15u</option>
<option value="16u.html">Team 16u</option>
</select>
I would like the value "10u" to be in the select box when I load the page.
Use the selected attribute. Is google down?
<option value="10u.html" selected>Team 10u</option>