Open this link in IE to exactly understand the behavior that I will be describing and seek a hack for.
I have the following select list:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
When I render this in IE, drop-down behavior of this changes compared to other browsers due to which some of the options are pushed above the selectbox while the others are pushed below (based on the selected option)
Since this is the default behavior of IE, what I am looking for is that the options should get re-ordered i.e. the option that a user selects should be made the first option. Check the image below:
Does anyone have a work-around for this ?
Also if anyone knows a hack to alter this default IE behavior, it would be great to know and learn that
Is this the right way ?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
var choose = $("#choose").bind('change',function(){alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Here is a method that works in Jquery:
HTML
<select id = "choose">
<option value="null" name="volvo">Volvo</option>
<option value="1" name="saab">Saab</option>
<option value="2" name="mercedes">Mercedes</option>
<option value="3" name="audi">Audi</option>
</select>
jQuery
var choose = $("#choose").bind('change',function(){
choose.find('option:selected').prependTo(choose);
});
(Source)
FULL CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var choose = $("#choose").bind('change', function() {
alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<html>
<head>
<script src="jquery-3.1.0.js"></script>
<script>
$(function () {
var selectedItem = $("#selectItem").bind('change', function () {
selectedItem.find('option:selected').prependTo(selectedItem);
});
});
</script>
<head>
<body>
<select id="selectItem">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</body>
</html>
Thanks... :)
Related
I want to use a drop down list with url, when the user choose an element it will be open like a simple link, this is what I did but it's not working, I still in my current page.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header-link1").change(function() {
if ($(this).val() != '') {
window.location.href = $(this).val();
}
});
</script>
</head>
<body>
<form>
<select name="forma" id="header-link1">
<option value="Select option">
Select option
</option>
<option value="http://www.surtymar.com/fr/reglementation-internationale/">
Réglementation internationale 15
</option>
<option value="http://www.surtymar.com/fr/reglementation-union-europeenne/">
Réglementation 15
</option>
</select>
</form>
</body>
</html>
Try this:-
Use JQuery to achive this.
$(document).ready(function() {
$("#header-link1").change(function(){
if ($(this).val()!='') {
window.location.href=$(this).val();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
<select name="forma" id="header-link1" >
<option value="Select option">
Select option
</option>
<option value="http://www.surtymar.com/fr/reglementation-internationale/">
Réglementation internationale 15
</option>
<option value="http://www.surtymar.com/fr/reglementation-union-europeenne/">
Réglementation 15
</option>
</select>
</form>
Try this! Should work! It just select options value and redirect user!
<form >
<select name="forma" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="http://surtymar.com/fr/reglementation-internationale/">Réglementation internationale 15</option>
<option value="http://surtymar.com/fr/reglementation-union-europeenne/">Réglementation 15</option>
</select>
</form>
I am new to Angularjs.I am trying to set default value for select in angularjs with static values.I am not using any ng-repeat or options.But i am not able to set default value using ng-selected.Everywhere i find solutions only for ng-options but not for static values.
Here is my html
<select name="gender" id="gender" data-ng-model="gender" ng-
selected=="Male">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
Can anyone tell where i am doing wrong?
You can set default value for ng-model in controller, try adding this in your controller
$scope.gender = 'Male';
You can use ng-init directive. As Sraven said , ng-selected must use <option> tag.
My Example
<select name="gender" id="gender" data-ng-model="gender" ng-init="gender='Male'">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
According to official DOCS, ng-selected is for options not for select.
You should have the boolean as ng-selected value
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<select ng-init="mySel = true">
<option>Select</option>
<option value="male" ng-selected="mySel">Male</option>
<option value="female">Female</option>
</select>
</body>
</html>
Please check this example using ng-model
The preferred way of doing this is using ng-model without ng-selected
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" >
<select name="gender" id="gender" ng-model="gender" ng-controller="myCtrl">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.gender = "Male"
});
</script>
</body>
</html>
ng-selected directive can be used only in <option> tag
Check the below code
<select name="gender" id="gender" data-ng-model="gender" >
<option value="">Select Gender</option>
<option ng-selected="true" value="Male">Male</option>
<option value="Female">Female</option>
</select>
I have a local server with NodeJs and on one page I have three select tags. I would like when one option in the first select tag is selected to completely remove it from the list of the other select tag. Unfortunately nothing seems to be happening. The file remove.js is in public/js (so don't think that's the problem)
html:
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script type="text/javascript" src="/js/remove.js"></script>
<select name="rank1" size="1" id="select1" >
<option value="" selected disabled hidden>Rank</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="rank2" size="1" id="select2" >
<option value="" selected disabled hidden>Rank</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="rank3" size="1" id="select3" >
<option value="" selected disabled hidden>Rank</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
JavaScript remove.js:
$(document).ready(function(){
$("select").change(function(){
var selectedValue1 = $(this).val();
var selectedValue2 = $("select").not($(this)).val();
$(this).find("option[value!="+selectedValue2+"]").show();
$("select").not($(this)).find("option[value!="+selectedValue1+"]").show();
$("select").not($(this)).find("option[value="+selectedValue1+"]").hide();
});
});
Thank you in advance!
You failed to include JQuery.
Change this :
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
To :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
Change javascript write this
$(document).ready(function () {
var selected = 0
var prevSelected = 0;
$("select").change(function () {
prevSelected = selected;
selected = $(this).val();
$("select").not("#"+this.id).each(function(){
$("#"+this.id).find("[value=" + selected + "]").hide();
$("#"+this.id).find("[value=" + prevSelected + "]").show();
})
});
});
I think this might work your original code wasn't working as expected.
$(document).ready(function(){
var select1,select2,select3;
$("#select1").change(function(){
if(select1 > 0){
$("#select2").find("option[value="+select1+"]").removeAttr('disabled');
$("#select3").find("option[value="+select1+"]").removeAttr('disabled');
}
select1 = $(this).val();
$("#select2").find("option[value="+select1+"]").attr("disabled","disabled");
$("#select3").find("option[value="+select1+"]").attr("disabled","disabled");
});
$("#select2").change(function(){
if(select2 > 0){
$("#select1").find("option[value="+select2+"]").removeAttr('disabled');
$("#select3").find("option[value="+select2+"]").removeAttr('disabled');
}
select2 = $(this).val();
$("#select1").find("option[value="+select2+"]").attr("disabled","disabled");
$("#select3").find("option[value="+select2+"]").attr("disabled","disabled");
});
$("#select3").change(function(){
if(select3 > 0){
$("#select1").find("option[value="+select3+"]").removeAttr('disabled');
$("#select2").find("option[value="+select3+"]").removeAttr('disabled');
}
select3 = $(this).val();
$("#select1").find("option[value="+select3+"]").attr("disabled","disabled");
$("#select2").find("option[value="+select3+"]").attr("disabled","disabled");
});
});
I've checked a few pages online on how to disable a submit button of a dropdown box unless an option has been selected. But can't find one that works for me.
Any help on how to do that would be great!
Edit: I don't want <option value="not_valid">-- select an option --</option> to be considered as an option
<form action="action_page.php">
<select name="attacks" id="attacks">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
use onChange event
<html>
<head>
</head>
<body>
<form action="action_page.php">
<select name="attacks" id="attacks" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
<script>
function selectChanged(){
attacks = document.getElementById("attacks");
if(attacks.value =="not_valid"){//or whatever th unwanted value is
document.getElementById("battle").disabled = true;
} else{
document.getElementById("battle").disabled = false;
}
}
</script>
</body>
</html>
i see there is a disabled property on a specific item in the dropdown list but is there an enabled property on the whole html dropdown itself?
any suggestions?
According to the HTML 4 spec a select element has a disabled attribute.
So
<select disabled>
<option>Something</option>
</select>
should work
disabled="disabled"
This will disable a value within the combo box (it will still show up, but it will not have the ability to be selected):
<select>
<option disabled="disabled" value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This will disable the whole combo box:
<select disabled="disabled">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
may this will help
is same as :
<html>
<head>
<script type="text/javascript">
function makeDisable(){
var x=document.getElementById("mySelect")
x.disabled=true
}
function makeEnable(){
var x=document.getElementById("mySelect")
x.disabled=false
}</script></head><body><form>
<select id="mySelect"><option>Apple</option><option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="makeEnable()" value="Enable list">
</form>
</body>
</html>