Selected just only one value option from several option - html

<pre>
<td>
<select name="proses1" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses2" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses3" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
</pre>
i have tag html like above.. and i want for example i selected 1-itemset from proses1 and then i choose 1-itemset from proses2,
1-itemset from proses1 it get back to default(-------),
so the point is i want option just can selected one option.. how i can make it. thanks before

Although you havent said what type of process you want, i suggest you do it with jquery like
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
FIDDLE
EDIT
To use this, first you need to add jQuery library to your code then place this inside $(document).ready() method. As a summary, place the code below inside your head section.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
});
</script>
What this does is to add an onChange event handler with .on("change") method to the select elements and in that handler all select elements values are being set to 0 which is the very first option except the current one.

Related

JQUERY - Custom HTML Option Data for IF Statement for Chained Selection

edit: see "Edit" Section for updated question
I am trying to make the second dropdown selection dependent of the first, using jquery.
get "data-type" of first selection
if "data-type" == "String" trigger filter change of second selections "data-foo" containing value N
HTML Selections
<select id="first" name="first-selection" class="form-control">
<option value="a" class="b" data-type="c">a</option>
</select>
<select id="second" name="second" class="form-control">
<option value="n" data-foo="m">n</option>
</select>
I used to following code to check if I am able to get the "data-type" value and display it. But any attempt to get the data for an if statement failed so far.
$('#first').change(function () {
var selected = $(this).find('option:selected');
$('#type').html(selected.data('type'));
}).change();
edit - code with if statement
how do I use "data-type" for an if statement?
EDIT
New code and jsfiddle to make myself clear
<select id="first" name="first-selection" class="form-control">
<option value="1" class="type1" data-type="snowboot">bli</option>
<option value="2" class="type2" data-type="nose">bla</option>
<option value="3" class="type3" data-type="head">blu</option>
</select>
<p>Test output: <span id="type"></span>.</p>
<select id="second" name="second-selection" class="form-control">
<option value="11" data-foo="green">one of three</option>
<option value="22" data-foo="red">two of three</option>
<option value="33" data-foo="red">three of three</option>
</select>
$(function(){
$('#first').change(function(){
var selected = $(this).find('option:selected');
$('#type').html(selected.data('type'));
}).change();
});
Question
How do I use "data-type" and put it as an if statement before the function? The following won't do anything
if ($('select[id=first] option').filter(':selected').type() == "nose")
if(selected.data('type') == "nose")
var myvar = $('#first option:selected').data();
if(myvar == 'nose')
This is the code I want to run after the if statement:
var $firstvar= $("#first");
$secondvar= $("#second");
$options = $secondvar.find('option')
$firstvar.on('change', function () {
$secondvar.html($options.filter('[data-foo="' + 'red' + '"]'));
}).trigger('change');
This will do what you want. It will check, whether the selected option of the first select was of any of the types mentioned in the object conditions and will then go through all options of the second select and either show or hide them (using the jQuery .toggle(.toggle(!isNose||this.dataset.foo==="red")) method). The expression show=!found||this.dataset.foo===found will evaluate to true for all cases where found is undefined and to false only if found is "trueish" AND this.dataset.foo===found is false.
$(function() {
const conditions={nose:"red",head:"green"}; // add as many as you like ...
$('#first').change(function() {
let show,first=true; // first makes sure only ONE option can be set
const found=conditions[ $(this).find(":selected").data("type") ];
$('#second option').each(function(){
$(this).toggle(show=!found||this.dataset.foo===found);
if(first&&show) first=!(this.selected=true); // select first visible option
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="first" name="first-selection" class="form-control">
<option value="1" class="type1" data-type="snowboot">bli</option>
<option value="2" class="type2" data-type="nose">bla</option>
<option value="3" class="type3" data-type="head">blu</option>
</select>
<p>Test output: <span id="type"></span>.</p>
<select id="second" name="second-selection" class="form-control">
<option value="11" data-foo="green">one of three</option>
<option value="22" data-foo="red">two of three</option>
<option value="33" data-foo="red">three of three</option>
</select>

Required attribute for a dropdown does not work

I have a html form which has a dropdown consisting of a few values. If the user does not select an option and moves to the next field, I need to give an error message. I have used the required attribute but it does not fire in Chrome and Firefox.
This is my code :
<select name="gender" id="gender" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
The required attribute does not work on Chrome and Firefox. A JavaScript solution would also be good. At the time of submitting the data I am checking for empty fields but I would like to display an error message if the user does not select a value from the dropdown and moves to the next field.
Use below code, not need any script, use form tag
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">None</option>
<option value="demo">demo</option>
<option value="demo1">demo1</option>
<option value="demo2">demo2</option>
<option value="demo3">demo3</option>
</select>
<input type="submit">
</form>
</body>
</html>
Try using the onfocusout option on your select paired with some Javascript.
HTML
<select name="gender" id="gender" onfocusout="check()" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
JS
function check(){
var x = document.getElementById("gender").selectedOptions[0].label;
if(x == "Select Gender"){
alert("Please select an option.");
}
}
CodePen.io: https://codepen.io/anon/pen/XQxQgw
There's undoubtedly a more efficient way of doing this and you would need to tweak the JS to check if all fields have been completed etc. but that's my two cents in a pinch!

Drop down selection is still selectable with "readonly" attribute

I want a read-only "select" element to be not selectable, the same behavior as the readonly input box.
In the code below, you cannot change the value for the input box with the value "abc". However, you can still change the selection in the drop. I can't use "disabled" attribute because I still need to send these values to the server.
<input type="text" readonly="readonly" value="abc">
</input>
<select readonly="readonly">
<option>Item ABC</option>
<option>Item XYZ</option>
</select>
https://jsfiddle.net/6Lu1jpLx/
Simplist way to resolve this would be to use the below line:
$("#MySelect").css("pointer-events","none");
However, the following worked for me where in my case I wanted my Select to still have the disabled cursor - setting 'pointer-events' to 'none' will no longer show cursor as 'not-allowed'.
JQUERY
var isReadOnly = $("#MyCheckbox").prop("checked");
var domElements = $("#MyInput, #MySelect");
$(domElements).prop("readonly", isReadOnly);
$(domElements).toggleClass("my-read-only-class", isReadOnly);
$(domElements).find("option").prop("hidden", isReadOnly);
CSS
.my-read-only-class
{
cursor: not-allowed;
}
JSFiddle https://jsfiddle.net/xdddzupm/
style="pointer-events: none;"
Is worked for me
<select style="pointer-events: none;">
<option>Item ABC</option>
<option>Item XYZ</option>
</select>
$("select :selected").each(function(){
$(this).parent().data("default", this);
});
$("select").change(function(e) {
$($(this).data("default")).prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select disabled>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>
Try below code
<select>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>

Trying to have 2 drop down boxes point to a URL

So I am trying to have a page on my site that contains 2 drop down boxes and a submit button. The submit button will point to a URL when clicked and then that will take them to a new page.
The URL will be based on whatever is selected in the drop down menus.
For example:
Drop down 1 has options A and B
Drop down 2 has options 1 and 2
Then there would be a different url for each combination
A1 points to URL-1
A2 points to URL-2
B1 points to URL-3
B2 points to URL-4
I really don't know much about coding and have been searching for a way to do this for the last 3 hours and I just don't even know how to google it. I really appreciate any help I can get at this point. Thank you in advance! :)
Here is the code from my drop boxes. I edited the options to match the example with the A, B, 1, and 2.
<html>
<body>
<form>
<select id="list1t">
<option>Select one</option>
<option>A</option>
<option>B</option>
</select>
</form>
<form>
<select id="list2">
<option>Select one</option>
<option>1</option>
<option>2</option>
</select>
</form>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
var val1=$('#first').val();
var val2=$('#second').val();
if(val1=='A'){
if(val2=='1'){
url="URL1";
}
else{
url="URL2";
}
}else{
if(val2=='1'){
url="URL3";
}
else{
url="URL4";
}
}
window.location.href=url;
});
});
</script>
the html would be
<select id="first">
<option value="A" selected>A</option>
<option value="B">B</option>
</select>
<select id="second">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
you can use a link for clicking . no need of form or submit button
BUTTON

Redirect on select option in select box

At the moment I am using this:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
it redirect me on the location inside of the option value. But it doesn't work as expected .. mean that if I click on the first option of the select, then onChange action not running. I was thinking about javascript, but I think you'll have some better suggestions guys. So how can I make it work if I click on each option it'll redirect me to the it's value?
Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.
Here's an example:
https://jsfiddle.net/bL5sq/
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://google.com">Google</option>
<option value="https://yahoo.com">Yahoo</option>
</select>
I'd strongly suggest moving away from inline JavaScript, to something like the following:
function redirect(goto){
var conf = confirm("Are you sure you want to go elswhere?");
if (conf && goto != '') {
window.location = goto;
}
}
var selectEl = document.getElementById('redirectSelect');
selectEl.onchange = function(){
var goto = this.value;
redirect(goto);
};
JS Fiddle demo (404 linkrot victim).
JS Fiddle demo via Wayback Machine.
Forked JS Fiddle for current users.
In the mark-up in the JS Fiddle the first option has no value assigned, so clicking it shouldn't trigger the function to do anything, and since it's the default value clicking the select and then selecting that first default option won't trigger the change event anyway.
Update:
The latest example's (2017-08-09) redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains, as well as both domains requiring 'sameorigin' for framed content. - Albert
to make it as globally reuse function using jquery
HTML
<select class="select_location">
<option value="http://localhost.com/app/page1.html">Page 1</option>
<option value="http://localhost.com/app/page2.html">Page 2</option>
<option value="http://localhost.com/app/page3.html">Page 3</option>
</select>
Javascript using jquery
$('.select_location').on('change', function(){
window.location = $(this).val();
});
now you will able to reuse this function by adding .select_location class to any Select element class
For someone who doesn't want to use inline JS.
<select data-select-name>
<option value="">Select...</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[data-select-name]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
window.location.href = this.options[this.selectedIndex].value;
}
</script>
This can be archived by adding code on the onchange event of the select control.
For Example:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value=""></option>
<option value="http://google.com">Google</option>
<option value="http://gmail.com">Gmail</option>
<option value="http://youtube.com">Youtube</option>
</select>
{{-- dynamic select/dropdown --}}
<select class="form-control m-bot15" name="district_id"
onchange ="location = this.options[this.selectedIndex].value;"
>
<option value="">--Select--</option>
<option value="?">All</option>
#foreach($location as $district)
<option value="?district_id={{ $district->district_id }}" >
{{ $district->district }}
</option>
#endforeach
</select>
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://reactjs.org/">React Js</option>
<option value="https://angularjs.org/">Angular Js</option>
</select>