how do you add a scroll bar to the html select box? is there any javascript library that emulate this behavior?
or is there anyway to redesign, the interface I have 2 select box, items can be shifted to the right select box via >> & << Filezilla, norton commander, total commander kind of interface where items can be shifted left and right... (question is how to redesign to see the overflow words in the fixed width select box)
from this forum post, pointing to another example, the sample code will overlay using div to show the additional text, but it requires the user to hover on the options. not really the solution I am looking for, though I will use it for the time being.
<html>
<body>
<table>
<tr><td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</td>
<td>
<input type="button" value=">>"/><br>
<input type="button" value="<<"/>
</td>
<td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</td>
</tr>
</table>
</body>
</html>
the target browser is MSIE. from the above code, the user cant see 'option 1 The long Option' etc... and each option supposed to have up to a maximum of 200char.
Horizontal scrollbars in a HTML Select are not natively supported. However, here's a way to create the appearance of a horizontal scrollbar:
1. First create a css class
<style type="text/css">
.scrollable{
overflow: auto;
width: 70px; /* adjust this width depending to amount of text to display */
height: 80px; /* adjust height depending on number of options to display */
border: 1px silver solid;
}
.scrollable select{
border: none;
}
</style>
2. Wrap the SELECT inside a DIV - also, explicitly set the size to the number of options.
<div class="scrollable">
<select size="6" multiple="multiple">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</div>
One options will be to show the selected option above (or below) the select list like following:
HTML
<div id="selText"><span> </span></div><br/>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#mySelect").change(function(){
//$("#selText").html($($(this).children("option:selected")[0]).text());
var txt = $($(this).children("option:selected")[0]).text();
$("<span>" + txt + "<br/></span>").appendTo($("#selText span:last"));
});
});
</script>
PS:- Set height of div#selText otherwise it will keep shifting select list downward.
Related
I have the following menu options defined:-
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
</select>
I would like to add the following checkbox:-
<strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts"/>
...and when include_Ts is checked, I would like the list of values for selectedBaseRelease and selectedNewRelease to change, e.g. to something like...
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a">ICC2_O-2018.06a</option>
<option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
<option value="/~releases/file4a">ICC2_N-2017.09-SP5a</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
<option value="/~releases/file1a">ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a">ICC2_O-2018.06a</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
</select>
How does one define an if-then condition to activate the alternate select id choices when include_Ts is checked?
Here's one way to accomplish this using only CSS and no JavaScript. Live demo below.
A few things allow this to happen:
We're giving the values you'd like hidden by default a class (<option class="tbuild"...)
In the CSS, we're hiding elements with that class by default (.tbuild { display: none; })
In the CSS, we're also looking to see if the #include_Ts checkbox was checked, and if it is, we display those .tbuild options.
Note that for this to occur, the hierarchy needs to remain more or less the same as this demo. The checkbox needs to be prior to the select menus, and not within its own parent element separate from the select elements.
Let me know if you have any questions!
.tbuild {
display: none;
}
#include_Ts:checked~select .tbuild {
display: block;
}
<strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts" />
<br><br>
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
<option value="/~releases/file3" selected>ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
<option value="/~releases/file4a" class="tbuild">ICC2_N-2017.09-SP5a</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected>ICC2_O-2018.06-SP1</option>
<option value="/~releases/file1a" class="tbuild">ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</option>
</select>
I have two dropdown selects that have the same values. I am building a converter from the source (left) unit to the destination (right) unit . It doesn't make sense to convert to and from like units. I know how to add an event on a dropdown select to remove the selected option from the alternate box but I am unclear on writing this to produce the best UI experience. Give the following trimmed case:
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
What might be a best practice for approaching this? If you choose a source of "Unit 2" how should destination react, remove it? Then I need a reset button, or if you choose "Unit 2" in destination as well, bounce source to something else (that seems worse and intuitive)?
Forget about this and just validate on submit?
Check the new value on each dropdown change event.
If the value is also selected in the other dropdown, move the value of the other dropdown to next (or default) option.
To give the user a clue that he should not select the same value twice, gray out the values that are already select in the other dropdown.
I have written the code for you, here is an executable snippet:
$("#srcUnit, #dstUnit").change(function(){
/*Detect wether we have srcUnit or dstUnit */
if($(this).attr("id") == "srcUnit"){var otherUnit = "dstUnit";}
else{var otherUnit = "srcUnit";}
/*Save new Value*/
var newVal = $(this).children("option:selected" ).val();
/*Select next option in other dropdown if it's old value was selected*/
if(newVal == $("#"+otherUnit+" option:selected").val()){
$('#'+otherUnit+' option:selected').removeAttr('selected').next().attr('selected', 'selected');
}
/*Update UI*/
$('#'+otherUnit+' option').removeClass("disabled");
$('#'+otherUnit+' option[value="'+newVal+'"]').addClass("disabled");
});
.disabled {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="srcUnit" id="srcUnit">
<option value="Unit 1" selected>Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1" class="disabled">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
I edited my answer to better fit the question, old Answer:
Use the HTML 5 disabled attribute.
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" disabled>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
Read more and try out here: http://www.w3schools.com/tags/att_option_disabled.asp
Subscribe to the onchange event of the dropdowns with javascript and toggle the attribute as needed.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is kind of an odd one. Long story short, I'm trying to add strings together using dropdown lists but I'm not quite sure how to go about it and searching for answers has borne no fruit.
I've tried any number of combinations of jquery, java, and HTML but nothing works yet
Example:
Selection 1: first-string
Selection 2: second-string
Selection 3: third string
I also need it to display the result of this on screen somewhere (I was trying to run a function via a button that would add the strings together and display them in a text box but it would only add numbers, not strings)
EDIT: I felt i'd fundementaly misunderstood...well just about everything I tried which is why I didn't share the code. But here we go:
It is suggested you install a color picker to pair with this software
base = "000000";
eye = "FFFFFF";
nose = "000000";
m1c = "FFF000";
m2c = "00FFFF";
species = 1
m1 = 0
m2 = 0
function feli() {
var m1 = document.getElementById("textbox1").value;
var answer = "http://www.felisfire.com/demo.php?s="+species+"&b"="+"base"+"&e="+"eye"+"&n="+"nose"+"&m1="+"m1"+"&m1c="+"m1c"+"&m2="+"m2"+"&m2c="+"m2c";
var textbox3 = document.getElementById('textbox3');
textbox3.value=answer;
}
</script>
Species
<select name=species id=species>
<option value="1">Felidae</option>
<option value="3">Aquus</option>
<option value="8">Scalae</option>
<option value="5">Zerda</option>
<option value="6">Chetae</option>
<option value="10">Aurae</option>
<option value="7">Igneo</option>
<option value="9">Lycreon</option>
<option value="4">Iuridon</option>
<option value="2">Xano</option>
</select>
Marking 1
<select name=m1 onChange = "m1 = this.value">
<option value="1">None</option>
<option value="12">Accents</option>
<option value="41">Anubis (p)</option>
<option value="13">Appaloosa</option>
<option value="15">Back Spots</option>
<option value="124">Badger</option>
<option value="44">Ball Python</option>
</select>
Marking 2
<select name=m1 onChange = "m2 = this.value">
<option value="1">None</option>
<option value="12">Accents</option>
<option value="41">Anubis (p)</option>
<option value="13">Appaloosa</option>
<option value="15">Back Spots</option>
<option value="124">Badger</option>
<option value="44">Ball Python</option>
</select>
<input type="submit" name="button" id="button1" onclick="feli" value="Design!" />
<input type="text" name="textbox3" id="textbox3" readonly="true"/>
</div>
It's simple to combine the string using JQuery.
$("input").on("change", function () {
$('#combine').val(($('#str1').val() +" "+ $('#str2').val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="str1" />
<input type="text" id="str2" />
<input type="text" id="combine" />
Hope it helps.
This code works.
If your HTML looks like this.
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">tisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">thisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">thisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<textarea name="" id="resulter" cols="30" rows="10"></textarea>
and you jQuery would look like this.
<script>
$(function(){
$('select').change(function(){
// Get the selected option text
var getText = $(this).find('option:selected').text();
// Get the current textarea text
var areaText = $('#resulter').text();
// Concatenate the selected and area text together
$('#resulter').text(areaText + getText);
});
});
</script>
This is my HTML
<select id="v-1" class="form-control input-sm">
<option value="624">Video 1</option>
<option value="625">Video 2</option>
<option value="626">Video 3</option>
<option value="627">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630">Video 7</option>
</select>
In my javascript file, i have a function that removes some of the options by adding style="display: none;" to the option tag. For example:
<select id="v-1" class="form-control input-sm">
<option value="624" style="display: none;">Video 1</option>
<option value="625" style="display: none;">Video 2</option>
<option value="626">Video 3</option>
<option value="627" style="display: none;">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630" style="display: none;">Video 7</option>
</select>
But when I call $('#v-1').val(), the result is 624. I wanted the result to be 626 or the first option that doesn't have the style, display: none.
$("#v-1 option").each(function()
{
if($(this).is(':visible')){
alert($(this).val());
return false;
}
});
Doesn't matter if using above code will help. Anyhow display : none won't hide the option items in Macintosh computer.
Instead I would suggest to remove the element from the select and include it on the fly when needed.
You could, probably, do:
jQuery("#v-1").find("option:visible:selected").val();
To get the value of the selected option (and visible).
If you just want to get the value of the first visible option, you could do:
jQuery("#v-1").find("option:visible:eq(0)").val();
Try this
$("#v-1 option").each(function()
{
if($(this).is(':visible')){
alert($(this).val());
return false;
}
});
Try this :
$('option:not(:checked)).val()
http://api.jquery.com/not-selector/
Use disable instead of style="display: none;" in your option
Html-
<select id="v-1" class="form-control input-sm">
<option value="624" disabled="disabled" >Video 1</option>
<option value="625" disabled="disabled">Video 2</option>
<option value="626">Video 3</option>
<option value="627" disabled="disabled">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630" disabled="disabled">Video 7</option>
</select>
script-
$(document).ready(function(){
alert($("#v-1").val());
})
output: 626
Here's the fiddle http://jsfiddle.net/v52hb28u/
I have this working in IE 7 using getElementById() but in IE8 and IE9 that does not work. What I am doing is I need to do validation on the select boxes to see that they are required and check what they selected to do other things. I also need to check the input boxes to see what the value is and it is required as well.
function saveTest(){
var startNumber=0;
var endNumber=3;
// Works
alert(document.myForm.mySelect_1.value);
for (i = startNumber; i <= endNumber; i++) {
// I know this is not right but I am trying everything
alert(document.myForm.mySelect_+i.value);
// Using JQuery to try to solve the issue and this does not work for me.
alert($('#mySelect_'+i).val());
}
}
I know these are not dynamically created belwo but this is just to help me find the answer to this issue. I am creating more selects
<input name="myText_1" id="myText_1" value="">
<br />
<select name="mySelect_1" id="mySelect_1">
<option value="0">- - - Select One - - -</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
</select>
<br />
<input name="myText_2" id="myText_2" value="">
<br />
<select name="mySelect_2" id="mySelect_2">
<option value="0">- - - Select One - - -</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
</select>
<br />
<input name="myText_3" id="myText_3" value="">
<br />
<select name="mySelect_3" id="mySelect_3">
<option value="0">- - - Select One - - -</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
</select>
<br />
Save
If I am not clear enough let me know. I will do my best to explain anything you do not understand.
Thanks for your time.
The following line is not correct; you are trying to concatenate a variable name, called mySelect_ to an integer:
alert(document.myForm.mySelect_+i.value);
Instead, you should use the associative array syntax:
alert(document.myForm['mySelect_'+i].value);
Also, within this same loop, you should start from 1 instead of 0, since there's no element called mySelect_0.
Here's a working DEMO.
You have created drop downs with Names
Try using
$('select[name=mySelect_'+i+']').val();
else
$("#id option:selected").text()