I'm trying to create a form with several select and the user should rank these selects from 1-8. However, I'm having some trouble hiding/removing/disabling the select option.
Here's my form
this is just the first four of the 8 selects to be ranked
<label>Spirituality</label>\
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>School</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Family</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Friends</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
This is what I got so far for my script
$(document).ready(function () {
$("#ranks1").click(function () {
$('#ranks1 option').prop('disabled', true);
});
});
And I did this for the CSS. For the disabled option
select option[disabled] {
display: none !important;
}
More background on what the form looks like.
I think you are wanting the change event, not the click event.
Please consider the following example which disables the selected option on change.
HTML:
<select id="selectlist">
<option value="0">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Javascript:
$('#selectlist').on('change', function() {
var selectedVal = $(this).find(":selected").val();
if (selectedVal != 0) {
// disable selected value
var selectedOption = $(this).find('option[value=' + selectedVal + ']');
selectedOption.attr('disabled', 'disabled');
}
});
JSFiddle: https://jsfiddle.net/tp9urjkb/
I get these type of array in my javascript function as shown in image.Now i want selected all city in my dropdownlist which i get in my javascript array.
I have tried it but i didn't get success.How to do it.
function searchitem(id,name)
{
var ADDRESS = value.Address;
console.log(ADDRESS);
$("#Address option[value='" + vin + "']").prop("selected", true);
}
HTML Code
<select class="ct-js-select ct-select-lg" multiple="multiple" id="Address" name="Address[]" style="margin-left:14px;">
<option value="any">Any</option>
<optgroup label="City">
<?php foreach($Locations_Response->city as $CITIES){ ?>
<option value="<?php echo $CITIES; ?>"><?php echo $CITIES; ?></option>
<?php } ?>
</optgroup>
</select>
You need a loop:
var ADDRESS = ['Aberdeen Twp.','2'];
$.each(ADDRESS,function(i,vin) {
$("#Address option[value='" + vin + "']").prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ct-js-select ct-select-lg" multiple="multiple" id="Address" name="Address[]" style="margin-left: 14px; " tabindex="-1">
<option value="any">Any</option>
<optgroup label="City">
<option value="Aberdeen Twp.">Aberdeen Twp.</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
</select>
<select id='slc' name='slc'>
<?php
for($c=0;$c<10;$c++)
{
echo"<option> ".$c." </option>";
}
?>
script here
var txt=$('#slc').find(":selected").text();
I have a custom page template with three dropdown, the values of each dropdown is populate dynamically. Now, I want to cascade it. Whatever option the user choose in 1st dropdown, the values that under of that option will be displayed as an options in 2nd dropdown, same as in the 3rd dropdown.
I have a JS snippet, but the cascading of the three dropdown is not working
Snippet PHP:
<form action='' method='post' name='test' id='test'>
<div class="div-select">
<label for="list_position" id="idname">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_position(this.form)">
<option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
<?php
foreach($query_location as $option){
if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
else
echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
};
?>
</select>
</div>
<div class="div-select">
<label for="list_position" id="idname">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_location(this.form)">
<option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
<?php
foreach($query_location as $option){
if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
else
echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
};
?>
</select>
</div>
<div class="div-select">
<label for="list_position" id="idname">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_location(this.form)">
<option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
<?php
foreach($query_location as $option){
if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
else
echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
};
?>
</select>
</div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>
Snippet JS:
function app_position(form){
var val=form.list_position.options[form.list_position.options.selectedIndex].value;
self.location='page-resume-databank?list_position=' + val ;
}
function app_location(form){
var val=form.list_position.options[form.list_position.options.selectedIndex].value;
var val2=form.list_location.options[form.list_location.options.selectedIndex].value;
self.location='page-namepage?list_location=' + val + '&list_processed=' + val2 ;
}
<form action='' method='post' name='resumeDatabank' id='resumeDatabank'>
<div class="div-select">
<label for="list_position" id="#ddress_search LABEL">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_position(this.value)">
<option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
<?php
foreach($query_location as $option){
if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
else
echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
};
?>
</select>
</div>
<div class="div-select" id="show_street">
<label for="list_position" id="#address_search LABEL">Street</label>
<br/>
<select name="list_position" id="filterbypostion">
<option name="default" class="filter_by" selected="selected" value="Select by Position">Select Road</option>
</select>
</div>
<div class="div-select" id="show_roads">
<label for="list_position" id="#address_search LABEL">Roads</label>
<br/>
<select name="list_position" id="filterbypostion">
<option name="default" class="filter_by" selected="selected" value="Select by Position">Select Road</option>
</select>
</div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>
<script>
function app_position(city){
//city is selected value of city drop down
//give the correct path to you ajax.php
$.ajax({
type: "POST",
url: 'ajax.php',
data: "city="+city+"type=street" ,
success: function(data)
{
$("#show_street").html(data);
}
});
}
function app_location(street){
//street is selected value of street drop down
//give the correct path to you ajax.php
$.ajax({
type: "POST",
url: 'ajax.php',
data: "street="+street+"type=roads" ,
success: function(data)
{
$("#show_roads").html(data);
}
});
}
</script>
in you ajax.php file
<?php
$type = $_POST['type'];//this type will load the relevant function.
if($type="street"){
$city = $_POST['city'];
//now get the value of streets belongs to this city
$your_query = "Select * from street_table where city_id=$city";//you can modify this query according to your table
$res = mysql_query($your_query);
?>
<label for="list_position" id="#address_search LABEL">Street</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_location(this.value)">
<?php while($raws = mysql_fetch_assoc($res)){?>
<option name="default" class="filter_by" selected="selected" value="<?php echo $raws['street_id']?>"><?php echo $raws['street_name']?></option>
<?php }//END OF WHILE?>
</select>
<?php }//END OF IF CHECcing street option
if($type="roads"){
$street = $_POST['street'];
//now get the value of streets belongs to this city
$your_query_roads = "Select * from road_table where street_id=$street";////you can modify this query according to your table
$res_roads = mysql_query($your_query_roads);
?>
<label for="list_position" id="#address_search LABEL">Street</label>
<br/>
<?php while($raws_roads = mysql_fetch_assoc($res_roads)){?>
<input name="roads" type="radio" value="<?php echo $raws_roads['road_id'];?>">
<?php }//END OF WHILE?>
<?php
}
?>
You can do it in another way, the other two select box can be fetch from ajax request by posting which box you want , and the entire select box you can send from a component,
like :
$("#country").live("change", function(){
$.post("component.php", country:$(this).val(), function(data){
$("#state-div").html(data);
}
});
and same for other two.
I have dropdown and it is an array. I'm using JavaScript to clone this dropdown when button "Add" is clicked. So it is appeared many times and it is inserted correct. But when I try to set selected value of this dropdown, when I press submit values of all forms of this dropdown becomes the same. I think this is because I use set_select('labeling[]') as array like this:
<option value=''" . set_select('labeling[]', '') . " role='menuitem'> </option>
But when I try to use it like that:
<option value=''" . set_select('labeling', '') . " role='menuitem'> </option>
it doesn't set selected anything. My view is:
<select name="labeling[]" id="labeling" class="dropdown">
<option value=''" . set_select('labeling[]', '') . " role='menuitem'> </option>
<option value="1" <?php echo set_select('labeling[]', '1'); ?> role="menuitem">1</option>
<option value="2" <?php echo set_select('labeling[]', '2'); ?> role="menuitem">2</option>
<option value="3" <?php echo set_select('labeling[]', '3'); ?> role="menuitem">3</option>
<option value="4" <?php echo set_select('labeling[]', '4'); ?> role="menuitem">4</option>
</select>
How could I do that - to be selected values for each dropdown? :) Thanks!
I edited my question. My whole code is:
$(document).ready(function () {
$('.multi-field-wrapper').each(function () {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function (e) {
var $template = $('.multi-field:first-child', $wrapper).clone(true);
$template.find('input', 'select').val('').focus();
$template.appendTo($wrapper);
});
});
<div class="container multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div class="row">
<div class="col-md-4 col-md-offset-1 col-sm-3">
<div class="form-group">
<select name="labeling[]" id="labeling" class="dropdown">
<option value=''" . set_select('labeling[]', '') . " role='menuitem'> </option>
<option value="firm1" <?php echo set_select('labeling[]', 'firm1'); ?> role="menuitem">firm1</option>
<option value="firm2" <?php echo set_select('labeling[]', 'firm2'); ?> role="menuitem">firm2</option>
<option value="firm3" <?php echo set_select('labeling[]', 'firm3'); ?> role="menuitem">firm3</option>
<option value="firm4" <?php echo set_select('labeling[]', 'firm4'); ?> role="menuitem">firm4</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
First of all lets assume your page name is "A.php". Create a hidden field in this page. ex:
<input type="hidden" id="unique_index" value="0" />
<select name="labeling[]">
<option value="1" <?php echo set_select('labeling[]', '1', TRUE, 0); ?> role="menuitem">1</option>
<option value="2" <?php echo set_select('labeling[]', '2', FALSE, 0); ?> role="menuitem">2</option>
<option value="3" <?php echo set_select('labeling[]', '3', FALSE, 0); ?> role="menuitem">3</option>
</select>
Now, in javascript (where you were cloning the element earlier that is the function which get invoked on click of button), write a get call like this:
var newIndex = $('#unique_index').val();
var cnt = parseInt(newIndex)+1;
$.get( "new_ajax_page_url.php", { counter: cnt} )
.done(function( data ) {
data.find('input', 'select').val('').focus();
data.appendTo($wrapper);
});
Now in the new_ajax_page_url.php, which will only contain:-
$newCounter = $_GET['counter'];
$str = <<<EOD
<select name="labeling[]">
<option value="1" set_select('labeling[]', '1', TRUE, $newCounter) role="menuitem">1</option>
<option value="2" set_select('labeling[]', '2', FALSE, $newCounter) role="menuitem">2</option>
<option value="3" set_select('labeling[]', '3', FALSE, $newCounter); role="menuitem">3</option>
</select>
EOD;
echo $str;
+++++++
Hope it is helpful :like:
Try this If I am understanding you problem correctly:
This is a sample case, try to do the way ci does:-
$options = array(
'small' => 'Small Shirt',
'med' => 'Medium Shirt',
'large' => 'Large Shirt',
'xlarge' => 'Extra Large Shirt',
);
echo form_dropdown('shirts', $options, 'large');
// Would produce:
<select name="shirts">
<option value="small">Small Shirt</option>
<option value="med">Medium Shirt</option>
<option value="large" selected="selected">Large Shirt</option>
<option value="xlarge">Extra Large Shirt</option>
</select>
Do let me know If anything is incorrect anywhere?
You need to set the array indices yourself; example:
labeling[0]
labeling[1]
labeling[2]
Without those indices each option will overwrite the previous one.
Whether or not an option is the current selected item is controlled by the SELECTED attribute in the option.
<select name="labeling[]" id="labeling" class="dropdown">
<option value="1" role="menuitem">1</option>
<option value="2" SELECTED role="menuitem">2</option>
<option value="3" role="menuitem">3</option>
<option value="4" role="menuitem">4</option>
</select>
You haven't shown much of your code so I can only guess based on what you say that when you submit it loses the ability to properly process the PHP function that you are calling. In this case I would recommend either generating the page with the SELECTED option in the appropriate locations or using Javascript to add SELECTED to the appropriate options in your lists.
if you are using set_select() on your first select box the integer passes should be 0, on your second select box it should be 1, and so on.... Now the set_select() function does know which key should be used and is able to set the correct value as selected for all your select boxes with an array as field name, YAY!
HTML will look like this:
<select name="labeling[]">
<option value="1" <?php echo set_select('labeling[]', '1', TRUE, 0); ?> role="menuitem">1</option>
<option value="2" <?php echo set_select('labeling[]', '2', FALSE, 0); ?> role="menuitem">2</option>
<option value="3" <?php echo set_select('labeling[]', '3', FALSE, 0); ?> role="menuitem">3</option>
</select>
<select name="labeling[]">
<option value="1" <?php echo set_select('labeling[]', '1', TRUE, 1); ?> role="menuitem">1</option>
<option value="2" <?php echo set_select('labeling[]', '2', FALSE, 1); ?> role="menuitem">2</option>
<option value="3" <?php echo set_select('labeling[]', '3', FALSE, 1); ?> role="menuitem">3</option>
</select>
I'm trying to get 3rd select box values according to first 2 select box selection (dynamic values);
jQuery ajax code is (It only works with airport select box)
$("#airport").change(function() {
var aid=$(this).val();
var dataString = 'aid='+ aid;
$.ajax
({
type: "POST",
url: "booking/findcompany.php",
data: dataString,
cache: false,
success: function(data) {
$("#company").html(data);
}
});
});
<select name="site" id="site" class="site">
<option value="" selected="selected">Select</option>
<option value="1">Site One</option>
<option value="2">Site Two</option>
<option value="3">Site Three</option>
</select>
<select name="airport" id="airport" class="airport">
<option value="1">Airport One</option>
<option value="2">Airport Two</option>
<option value="3">Airport Three</option>
</select>
<select name="company" id="company" class="company">
//Options here based on above 2 selected values
</select>
PHP code is findcompany.php
<?php
if($_POST['aid']) {
$aid=$_POST['aid'];
$site=$_POST['sid']; <<<<<< How Can I pass This ID
$compsql=mysql_query("select * from tbl_company Where air_id='$aid' and site_id='$sid'");
while($rows=mysql_fetch_array($compsql)){
$cid=$rows['comp_id'];
$cdata=$rows['comp_title'];
?>
<option value="<?php echo $cid; ?>"><?php echo $cdata; ?></option>
<?php } } ?>
use $('#site').val() to get the value of the 1st select box, and then add it to your dataString. So now your js code would look like -
$("#airport").change(function()
{
var aid=$(this).val();
var sid=$('#site').val();
var dataString = 'aid='+ aid +'&sid='+sid;
...