Php: Change in list values dynamically without page load - javascript

I have three list in my form where having same option while loading the form.
But my requirement is : as soon as user selects the first option it should be removed from second list and as user gives second option it should be removed from third list. So there are no chances to have duplicate choice.
<html>
<head>
<script language="JavaScript">
function enable_text(status)
{
status=!status;
document.f1.other_text.disabled = status;
}
</script>
</head>
<body onload=enable_text(false);>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>


Here's jQuery event change on select boxes, which will disable selected option in other selects but not in selected one.
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
And after that will restart options that are disabled but not selected.
--I've also seted value "Y" for yellow.
$(function(){
$('select').on('change', function(){
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
// restart options that are disabled, but not selected anymore.
var selectedElements = "";
$('select option:selected').each(function(k,v){
selectedElements += (selectedElements!=""?",":"")+ '[value="'+$(this).val()+'"]';
});
$('select option:disabled').not(selectedElements).prop('disabled', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>

Related

Take the value and create filter from input field?

How to take text from selected options and wrap it into div and append that div to the one with class appendElements?
here is jsfiddle https://jsfiddle.net/2w5dp7vk/14/ I am trying to add filter when i check some option or when i type something in input field. I want to be able to take the value from input or select option and wrap that value into div tag and append it on .appendElements when i click on done button.
<div class="appendElements"></div>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>

First, you've to attach a change event to your select èlement .searchFilter, then when the user changes you've to get the text of the selected option using $('.searchFilter option:selected').text() and attach it to your output div .appendElements, like:
jQuery suggestion :
var selectElement = $('.selectpicker');
selectElement.on('change', function() {
var selected_option_text = selectElement.find('option:selected').text();
$('.appendElements').text(selected_option_text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<br>
<div class="appendElements"></div>
VanillaJS suggestion :
var selectElement = document.querySelector('.selectpicker');
selectElement.addEventListener('change', function() {
var selected_option_text = selectElement.selectedOptions[0].text;
document.querySelector('.appendElements').textContent = selected_option_text;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<br>
<div class="appendElements"></div>

You can get the value of the select when it changes and set it as the textContent of the div in which you want to display the value of the select.
<div class="searchFilter">
<select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<p/>
<div id="result"></div>
<script>
function showChanges(){
document.getElementById("result").textContent = document.getElementById("selectpicker").value;
}
</script>
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<p/>
<div id="result"></div>
<script>
function showChanges(){
$('#result').text($('#selectpicker').val());
}
</script>

grab all selected answers from a form

I am trying to grap all selected values from a page and push them into an array.
I have tried the following:
values = $.map(answers ,function(option) {
return option.value;
});
//it was working at somepoint, but apparently not anymore. is there a easier way to get this accomplished?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>
<div class="input-field select2">
<p>q2</p>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="2">a</option>
<option value="5">b</option>
<option value="7">c</option>
<option value="10">d</option>
<option value="12">e</option>
</select>
<!-- <label>Materialize Select</label> -->
</div>
<div class="input-field select3">
<p>What do you Find More Interesting?</p>
<select>
<option value="" disabled selected>a</option>
<option value="1">b</option>
<option value="3">c</option>
</select>
</div>

Display value in input field from multiple select field

<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
Values selected above should display in another input text field below. Any help?

Using jQuery:
$("select[name='place_have']").change(function(){
var value = $(this).val();
$("input#optionOutput").val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
<input type="text" id="optionOutput">

Add required to select but it have already one value

I'd like to have a requiered Select for the "Brand car", the attribute is added but the problem is that I have already one value "Choose the brand name"
how can I make this work? (for the HTML5 checking)
$("#category").change(function() {
var category = parseInt($("#category").val(), 10);
switch (category){
case 2: //car
$("#car_part").show("slow");
$("#brand_car").prop('required',true);
}
....
}
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option id="0">Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>

You can add empty value to the select so it will be required if he chose "Choose the brand name"
the code will be like that:
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option value="" >Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>

How about this??
$("#category").change(function() {
var category = parseInt($("#category").val(), 10);
switch (category){
case 2: //car
$("#car_part").show("slow");
$("#brand_car").prop('required',true);
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option selected="true" style="display:none;">Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
<!--If you want to display default text as option but want to disable it below will work-->
<select id="brand_car" name="brand_car">
<option selected disabled>Choose the brand name</option>name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>

Control Multiple dropdown box by one main dropdown box

I am trying to create a main drop down box which control multiple drop down box. This multiple drop down box created in loop so i need dynamic script which works on class or id.
example -
<form method="post" name="postage">
Select All
<select id="options1" name="se1" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
Select Manually-
<select id="options2" name="se2" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se3" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se4" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<input type="submit" name="submit_result" />
</form>
I found one script but i don't know where to change -
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$('.west-yorkshire').change(function({
var value = $(this).val();
$('.className').each(function(
$(this).val(value);
alert(value);
));
}));
}//]]>
</script>

Is this what you were trying to achieve ? http://jsfiddle.net/9R9DV/2/
Changed some JS code
$(document).ready(function(){
$('#options1').change(function(){
var value = $(this).val();
$('.manual').each(function(){
$(this).val(value);
});
});
});
and classes to HTML code
<select class="manual" id="options2" name="se2" >
...
<select class="manual" id="options3" name="se3" >
...
etc.

Categories

Resources