Apply javascript to multiple items by class

Apply javascript to multiple items by class - javascript

I have some select boxes that I want to have color coded. There are three per row, by 18 rows.
It is easy to color code the drop down, but I need to use Javascript to color code the display of the selected item. I have cobbled together a script that does it, but only for the first one on the page .. and it changes ALL of them to the same color. I need the script to apply to each one independently. I am very much a beginner at Javascript. I have figured out that I need to use the var i thing, but I can't get it to work.
<td>
<div>
<select type="" name="tee_condition" class="selectcondition" id="tee_condition">
<option style="color: #5cb85c;" value="Excellent"<?php if($listresult['tee_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good"<?php if($listresult['tee_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair"<?php if($listresult['tee_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor"<?php if($listresult['tee_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="fairway_condition" class="selectcondition" id="fairway_condition">
<option style="color: #5cb85c;" value="Excellent"<?php if($listresult['fairway_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good"<?php if($listresult['fairway_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair"<?php if($listresult['fairway_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor"<?php if($listresult['fairway_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="green_condition" class="selectcondition" id="green_condition">
<option style="color: #5cb85c;" value="Excellent"<?php if($listresult['green_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good"<?php if($listresult['green_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair"<?php if($listresult['green_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor"<?php if($listresult['green_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
And my javascript is:
//**** Script to Color the Dropdowns
$(document).ready(function () {
colorSelect(); // call this first so we start out with the correct Color
// this will call our function every time the selection value of the field changes
$(".selectcondition").change(function () {
colorSelect();
});
});
// this changes the color of the selected item
function colorSelect() {
if ($(".selectcondition").val() === "Excellent"){
$('.selectcondition').css('color','#5cb85c');
}else if($(".selectcondition").val() === "Good"){
$('.selectcondition').css('color','#0275d8');
}else if($(".selectcondition").val() === "Fair"){
$('.selectcondition').css('color','#f0ad4e');
}else {
$('.selectcondition').css('color','#FF0000');
}
}

.css will set the CSS of all matching elements. Iterate over the selects with each instead, and get a reference to the current one you're iterating over with this.
You can also make the code much more concise by using an object indexed by option values instead of repetitive if/else statements:
function colorSelect() {
const colors = {
Excellent: '#5cb85c',
Good: '#0275d8',
Fair: '#f0ad4e',
Poor: '#FF0000'
}
$(".selectcondition").each(function() {
$(this).css('color', colors[this.value]);
});
}
colorSelect();
$(".selectcondition").change(colorSelect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<div>
<select type="" name="tee_condition" class="selectcondition" id="tee_condition">
<option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'tee_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good" <?php if($listresult[ 'tee_condition']=='Good' ){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'tee_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'tee_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="fairway_condition" class="selectcondition" id="fairway_condition">
<option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'fairway_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good" <?php if($listresult[ 'fairway_condition']=='Good' ){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'fairway_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'fairway_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="green_condition" class="selectcondition" id="green_condition">
<option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'green_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good" <?php if($listresult[ 'green_condition']=='Good' ){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'green_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'green_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>

Related

How to add superscript in option tag select dropdown 1st 2nd 3rd 4th 5th. 1ST I want S captial letters but i tried s will converted to small case

I used below code. But 1st --> returns 1sT --> I need 1ST
<option value="1ST"
<?php if (in_array("1ST", $_POST['pay_day'])) echo selected; ?>
> 1ˢᵀ </option>
<option value="2ND"
<?php if (in_array("2ND", $_POST['pay_day'])) echo selected; ?>
> 2ᴺᴰ </option>
<option value="3RD"
<?php if (in_array("3RD", $_POST['pay_day'])) echo selected; ?>
> 3ᴿᴰ </option>
<option value="4TH"
<?php if (in_array("4TH", $_POST['pay_day'])) echo selected; ?>
> 4ᵀᴴ </option>
<option value="5TH"
<?php if (in_array("5TH", $_POST['pay_day'])) echo selected; ?>
> 5ᵀᴴ </option>
Please help

<option value="1ST" <?php if (in_array("1ST", $_POST['pay_day'])) echo selected; ?> > 1<span style="text-transform: capitalize;">ˢᵀ</span></option>
<option value="2ND" <?php if (in_array("2ND", $_POST['pay_day'])) echo selected; ?> > 2<span style="text-transform: capitalize;">ᴺᴰ</span> </option>
<option value="3RD" <?php if (in_array("3RD", $_POST['pay_day'])) echo selected; ?> > 3<span style="text-transform: capitalize;">ᴿᴰ</span> </option>
<option value="4TH" <?php if (in_array("4TH", $_POST['pay_day'])) echo selected; ?> > 4<span style="text-transform: capitalize;">ᵀᴴ</span> </option>
<option value="5TH" <?php if (in_array("5TH", $_POST['pay_day'])) echo selected; ?> > 5<span style="text-transform: capitalize;">ᵀᴴ</span> </option>

jQuery set and trigger option value based on the input

i am using https://www.geodata.solutions/ for getting country,state,city list
And everything is working fine and i am able to save the data to databse
<select name="country" class="countries" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
<option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystatecity.js"></script>
Now i have to show the user to selected option
if $country , $state, $city are the details i fetched from the data base
so i change the html to following
<select name="country" class="countries" id="countryId">
<?php if($country!==""){?>
<option value="<?php echo $country; ?>" selected><?php echo $country; ?></option>
<?php } else { ?>
<option value="">Select Country</option>
<?php } ?>
</select>
<select name="state" class="states" id="stateId">
<?php if($state!==""){?>
<option value="<?php echo $state; ?>" selected><?php echo $state; ?>
</option>
<?php } else { ?>
<option value="">Select State</option>
<?php } ?>
</select>
<select name="city" class="cities" id="cityId">
<?php if($city!==""){?>
<option value="<?php echo $city; ?>" selected><?php echo $city; ?>
</option>
<?php } else { ?>
<option value="">Select City</option>
<?php } ?>
</select>
But Now the this is they are not ablue to change the dropdown . How can i solve this
i tried this also
<script>
jQuery(function($){
<?php if($country!==""){?>
var mySelect=$("#countryId");
mySelect.append(
$('<option value="<?php echo $country;?>" selected><?php echo
$country;?></option>'));
$('#countryId').trigger('change');
<?php } ?>
});
</script>
2) Question
I am checking for something that can integrate the country flag with the phone number field and i found https://intl-tel-input.com/. But now i have to select the country phone code automatically as per user change the country dropdown list in the fist select box . If there is any way we can make these each related ?

On change trigger id imported with ajax

I have a small script, I did not made it, I want to modify it but Im stuck.
There are two select options, state and city. When state is selected ajax is bringing the specific cities for that state.
I have default value both for state and city but I cant trigger the city to change.
Here is the javascript
$("#state_id").change(function() {
$.ajax({
url: "<?php echo base_url() . "ajaxreq/getcity/"; ?>" + $("#state_id").val(),
success: function(result) {
$("#ajaxcity").html(result);
}
});
});
$('#state_id').trigger('change');
This is html part:
<div class="logininputfield">
<label><?php echo $this->lang->line('region') ?><span>*</span></label>
<div class="inputfieldsection">
<select name="state_id" id="state_id">
<option value=""><?= $this->lang->line("please_select"); ?> </option>
<?php foreach ($state as $key => $state_name) { ?>
<option value="<?php echo $key; ?>" <?php if ($state_id == $key ) { ?> selected <?php } ?> ><?php echo $state_name; ?></option>
<?php } ?>
</select>
<span for="state_id" class="error"></span>
</div>
</div>
<div class="logininputfield">
<label><?php echo $this->lang->line('city') ?><span>*</span></label>
<div class="inputfieldsection">
<span id="ajaxcity">
<select name="city" id="city" class="input span6">
<option value=""><?php echo $this->lang->line('please_select'); ?></option>
</select>
</span>
<span for="city" class="error"></span>
</div>
</div>
The result is this:
<div class="inputfieldsection">
<span id="ajaxcity"> <select name="city_id" id="city_id" class="valid">
<option value="102">München</option>
<option value="103">Nürnberg</option>
<option value="104">Augsburg</option>
<option value="105">Regensburg</option>
<option value="106">Ingolstadt</option>
<option value="107">Würzburg</option>
<option value="108">Fürth</option>
<option value="109">Erlangen</option>
<option value="110">Bayreuth</option>
<option value="111">Bamberg</option>
<option value="112">Aschaffenburg</option>
<option value="113">Landshut</option>
<option value="114">Kempten (Allgäu)</option>
<option value="115">Rosenheim</option>
<option value="116">Neu-Ulm</option>
<option value="117">Schweinfurt</option>
<option value="118">Passau</option>
<option value="119">Freising</option>
<option value="120">Dachau</option>
<option value="121">Straubing</option>
<option value="122">Hof</option>
<option value="123">Memmingen</option>
<option value="124">Kaufbeuren</option>
<option value="125">Weiden in der Oberpfalz</option>
<option value="126">Amberg</option>
<option value="127">Coburg</option>
<option value="128">Ansbach</option>
<option value="129">Schwabach</option>
<option value="130">Germering</option>
<option value="131">Neumarkt in der Oberpfalz</option>
<option value="132">Erding</option>
<option value="133">Fürstenfeldbruck</option>
<option value="134">Deggendorf</option>
<option value="135">Forchheim</option>
<option value="136">Friedberg</option>
<option value="137">Neuburg an der Donau</option>
<option value="138">Landsberg am Lech</option>
<option value="139">Schwandorf</option>
<option value="140">Königsbrunn</option>
<option value="141">Unterschleißheim</option>
<option value="142">Kulmbach</option>
<option value="143">Olching</option>
<option value="144">Garmisch-Partenkirchen</option>
<option value="145">Lauf an der Pegnitz</option>
<option value="146">Zirndorf</option>
<option value="147">Lindau</option>
<option value="148">Pfaffenhofen an der Ilm</option>
<option value="149">Roth</option>
<option value="150">Geretsried</option>
<option value="151">Unterhaching</option>
<option value="152">Herzogenaurach</option>
<option value="153">Starnberg</option>
<option value="154">Waldkraiburg</option>
<option value="155">Vaterstetten</option>
<option value="156">Senden</option>
<option value="157">Weilheim in Oberbayern</option>
<option value="158">Sonthofen</option>
<option value="159">Neusäß</option>
<option value="160">Gersthofen</option>
<option value="161">Bad Kissingen</option>
<option value="162">Ottobrunn</option>
<option value="163">Aichach</option>
<option value="164">Puchheim</option>
<option value="165">Kitzingen</option>
<option value="166">Traunreut</option>
<option value="167">Gauting</option>
<option value="168">Lichtenfels</option>
</select><span for="city_id" class="error"></span>
</span>
<span for="city" class="error"></span>
</div>
I'm a noob with javascript.
I added myself the trigger part and it works but I dont know how to make it work for the city.
It would be something like this but is it doesnt work.
$('#city_id').val(<? echo $city_id; ?>).trigger('change');
Thank you in advance.

This was the answer i was looking for
<?php foreach ($city as $key => $city_name) { ?>
<option value="<?php echo $key; ?>" <?php if($city_id == $key) {?> selected <?php } ?> ><?php echo $city_name; ?></option>
<?php } ?>

display hidden div after form submit

I have a user drop down menu in my form code where user can select their option to process their request. The div ids ranges from fa1 to fa8.By default I am showing fa1 and fa2 in my form and fa3 to fa8 are set to display: none. I have added a button to add remove additional drop down menu depends upon user requirement( which will display\hide fa3 to fa8)
I am able to keep the user selected options after form submit using
<option <?php if ($_POST['fa-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
The issue I am facing here is if user added a addiotnal div (say fa3), selected drop down option and submit the form, the hidden div not displaying after submit (eventhough it keeping its drop down as user selected)
I would like to show the hidden div(if user added) as well along with the selected option after form submit
My html code:
<div class="block-no-height">
<div class="sub_headings"> Select Your FA director and Port</div>
<div class="wrap-quest-resp" id="fa1">
<div class="input-quest-no-height">FA and port - 1</div>
<div class="input-resp-no-height">
<select id="fa-select-1" name="fa-select-1">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-1']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-1']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-1']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-1']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-1']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-1']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-1']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-1']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-1']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-1']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-1']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-1']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-1']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-1']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-1']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-1" name="proc-select-1">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-1']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-1']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-1']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-1']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-1" name="port-select-1">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-1']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa2">
<div class="input-quest-no-height">FA and port - 2</div>
<div class="input-resp-no-height">
<select id="fa-select-2" name="fa-select-2">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-2']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-2']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-2']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-2']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-2']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-2']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-2']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-2']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-2']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-2']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-2']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-2']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-2']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-2']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-2']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-2']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-2" name="proc-select-2">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-2']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-2']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-2']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-2']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-2" name="port-select-2">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-2']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-2']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa3" style="display:none;" disabled="true">
<div class="input-quest-no-height">FA and port - 3</div>
<div class="input-resp-no-height">
<select id="fa-select-3" name="fa-select-3">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-3']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-3']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-3']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-3']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-3']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-3']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-3']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-3']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-3']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-3']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-3']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-3']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-3']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-3']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-3']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-3']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-3" name="proc-select-3">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-3']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-3']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-3']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-3']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-3" name="port-select-3">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-3']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-3']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa4" style="display:none;" >
<div class="input-quest-no-height">FA and port - 4</div>
<div class="input-resp-no-height">
<select id="fa-select-4" name="fa-select-4">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-4']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-4']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-4']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-4']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-4']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-4']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-4']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-4']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-4']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-4']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-4']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-4']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-4']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-4']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-4']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-4']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-4" name="proc-select-4">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-4']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-4']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-4']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-4']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-4" name="port-select-4">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-4']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-4']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa5" style="display:none;" >
<div class="input-quest-no-height">FA and port - 5</div>
<div class="input-resp-no-height">
<select id="fa-select-5" name="fa-select-5">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-5']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-5']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-5']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-5']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-5']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-5']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-5']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-5']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-5']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-5']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-5']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-5']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-5']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-5']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-5']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-5']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-5" name="proc-select-5">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-5']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-5']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-5']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-5']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-5" name="port-select-5">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-5']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-5']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa6" style="display:none;" >
<div class="input-quest-no-height">FA and port - 6</div>
<div class="input-resp-no-height">
<select id="fa-select-6" name="fa-select-6">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-6']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-6']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-6']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-6']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-6']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-6']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-6']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-6']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-6']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-6']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-6']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-6']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-6']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-6']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-6']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-6']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-6" name="proc-select-6">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-6']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-6']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-6']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-6']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-6" name="port-select-6">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-6']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-6']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa7" style="display:none;" >
<div class="input-quest-no-height">FA and port - 7</div>
<div class="input-resp-no-height">
<select id="fa-select-7" name="fa-select-7">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-7']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-7']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-7']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-7']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-7']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-7']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-7']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-7']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-7']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-7']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-7']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-7']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-7']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-7']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-7']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-7']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-7" name="proc-select-7">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-7']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-7']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-7']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-7']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-7" name="port-select-7">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-7']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-7']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa8" style="display:none;" >
<div class="input-quest-no-height">FA and port - 8</div>
<div class="input-resp-no-height">
<select id="fa-select-8" name="fa-select-8">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-8']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-8']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-8']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-8']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-8']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-8']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-8']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-8']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-8']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-8']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-8']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-8']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-8']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-8']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-8']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-8']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-8" name="proc-select-8">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-8']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-8']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-8']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-8']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-8" name="port-select-8">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-8']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-8']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="add_remove_column">
<input type="hidden" id="countfa" name="countfa" value="3" readonly>
<button type="button" onClick="AddNewFa();" id="addfa" > + Add New FA </button>
<button type="button" onClick="RemoveNewFa();" id="removefa" disabled="disabled"> - Remove FA</button>
</div>
</div>
My javascript to add\remove hidden divs(minimum it will show two divs and max 8, I have added to disable add or remove buttons depends upn on its max \min count)
function AddNewFa()
{
var facount = parseInt($('#countfa').val(),9) ;
if( facount < 9)
{
facount = facount+1;
for(i=3;i<9;i++)
{
if( i<facount )
$('#fa'+i).slideDown("fast");
else
$('#fa'+i).slideUp("fast");
}
$('#countfa').val(facount);
}
if( facount ==9 )
{ $('#addfa').attr('disabled','disabled');}
if( facount ==4 )
{ $('#removefa').removeAttr("disabled");}
}
//removing fa clicking remove button
function RemoveNewFa()
{
var facount = parseInt($('#countfa').val(),10) ;
if( facount >3)
{
facount = facount-1;
for(i=3;i<10;i++)
{
if( i<facount )
$('#fa'+i).slideDown("fast");
else
$('#fa'+i).slideUp("fast");
}
$('#countfa').val(facount);
}
if( facount ==3 )
{ $('#removefa').attr('disabled','disabled');}
if( facount =8 )
{ $('#addfa').removeAttr("disabled"); }
}

Hide/Show new menus based on user's selection

I have this menu:
Classificazione <select onchange="if(this.value == 'D'){ document.getElementById('menu2').style.display = 'block'; } else { document.getElementById('menu2').style.display = 'none'; }" style="margin-top: 5px;" name="classificazione">
<option value="art0"></option>
<option value="C" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="C") echo "selected"; ?> >Articoli</option>
<option value="D" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="D") echo "selected"; ?> >Documentazione</option>
<option value="A" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="A") echo "selected"; ?> >Libri</option>
<option value="G" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="G") echo "selected"; ?> >Materiali</option>
<option value="B" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="B") echo "selected"; ?> >Riviste</option>
</select><br />
Only when the user selects the value 'Documentazione' I want to show another (equal) menu, with different option.
I added this submenu:
<select style="margin-top: 5px;" name="menu2">
<option value="art0"></option>
<option value="C" >Corsi</option>
<option value="D" >Incontri</option>
<option value="A" >Convegni</option>
<option value="G" >Gruppi</option>
<option value="B" >Progetto</option>
</select><br />
But it's not working

Classificazione <select onchange="if(this.value == 'D'){ document.getElementById('menu2').style.display = 'block'; } else { document.getElementById('menu2').style.display = 'none'; }" style="margin-top: 5px;" name="classificazione">
<option value="art0"></option>
<option value="C" <?php if ($getParams['classificazione']=="C") echo "selected"; ?> >Articoli</option>
<option value="D" <?php if ($getParams['classificazione']=="D") echo "selected"; ?> >Documentazione</option>
<option value="A" <?php if ($getParams['classificazione']=="A") echo "selected"; ?> >Libri</option>
<option value="G" <?php if ($getParams['classificazione']=="G") echo "selected"; ?> >Materiali</option>
<option value="B" <?php if ($getParams['classificazione']=="B") echo "selected"; ?> >Riviste</option>
</select>
notice the onchange event.
<select style="margin-top: 5px; display: none;" id="menu2">
<option value="art0"></option>
<option value="C" >Corsi</option>
<option value="D" >Incontri</option>
<option value="A" >Convegni</option>
<option value="G" >Gruppi</option>
<option value="B" >Progetto</option></select>

Develop Reference

JavaScript is the programming language of the Web.

Apply javascript to multiple items by class - javascript

Related

How to add superscript in option tag select dropdown 1st 2nd 3rd 4th 5th. 1ST I want S captial letters but i tried s will converted to small case

jQuery set and trigger option value based on the input

On change trigger id imported with ajax

display hidden div after form submit

Hide/Show new menus based on user's selection

Categories

Resources