Develop Reference

how to avoid repetition of values in dropdown list while updating in php

I want to update "profile of a user" in php. There is a repetition of one value for two times in dropdown list. for example i take language value='Punjabi' from database but there is also a value placed in dropdown with name of 'Punjabi'.
The issue is simply that there is a repetition of value which i don't want.
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){ ?>
<select name="language" id="language" >
<option value='<?php echo $queryArray["language"];?> '> <?php echo $queryArray["language"]; ?></option>
//for example, the value from database is "Punjabi"
<option value="Hindi">Hindi</option>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
</select>
<?php } ?>
when a value='Punjabi' from database is selected in dropdown list, the dropdown should not show the value='Punjabi' that is already placed in dropdown.
Remember: i have more than 1000 values in my dropdown(html) list.
screenshot

Instead of creating a new option according to the user data, Check if existing options are equal to user data:
<select name="language" id="language" >
<option value="Punjabi" <?php if ($queryArray["language"]=="Punjabi"){echo 'selected="selected"'} ?>>Punjabi</option>
<option value="Hindi" <?php if ($queryArray["language"]=="Hindi"){echo 'selected="selected"'} ?>>Hindi</option>
<option value="Urdu" <?php if ($queryArray["language"]=="Urdu"){echo 'selected="selected"'} ?>>Urdu</option>
</select>
If there are large number of options and you don't want to hard code these conditions, you can remove the second option using javascript on DOM ready:
$(document).ready(function(){
$('option[value="<?php echo $queryArray["language"] ?>"]').eq(1).remove();
})

skip the loop when value is equal to Punjabi, Urdu and Hindi.
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){ ?>
<select name="language" id="language" >
<?php if($queryArray["language"]!="Punjabi" && $queryArray["language"]!="Urdu" &&
$queryArray["language"]!="Hindi") { ?>
<option value="Hindi">Hindi</option>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
<?php } ?>

I think you are doing it wrong way the correct way would be having a table which stored all the languages along with values
using selected attribute to achieve your objective
<?php
$result=mysqli_query($conn, "select * from profile where id=$firstPerson");
$queryArray1=mysqli_fetch_array($result);
$langOfUser=$queryArray1["language"];
?>
<select name="language" id="language" >
<?php $result=mysqli_query($conn, "select * from langtab");
while($queryArray=mysqli_fetch_array($result)){ ?>
<option value='<?php echo $queryArray["languageValue"];?> ' <?php if($langOfUser== $queryArray["languageValue"]){ echo 'selected';}?>> <?php echo $queryArray["languageName"]; ?></option>
<?php } ?>
</select>

You have to use if condition to display values in select option.
<select name="language" id="language" >
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){
if($queryArray["language"]!="Punjabi") {
$opval = "<option value=" . $queryArray["language"] . ">". $queryArray["language"]. " </option> "
echo $opval;
}
?>
<option value="Punjabi">Punjabi</option>
<option value="Hindi">Hindi</option>
<option value="Urdu">Urdu</option>
</select>

So your problem is that you have html hardcoded options and database options. You need to merge them into one on that website.
So you can use some javascript
elements = [1, 2, 9, 15].join(',')
$.post('post.php', {elements: elements})
But you can fill your elements like this is you don´t want to write it by hand
$("#id select").each(function()
{
allOptionsInSelect.push($(this).val());
});
Than on php side you can do
$elements = $_POST['elements'];
$elements = explode(',', $elements);
And now you have html hardcoded select on server side. Now you need to check if it doesn´t already exist when you are printing from database
You can do that like this
if(in_array(value_from_database, $elements) {
// It is so skip
} else {
// It is not, so print it
}

You can use if elseif this way.
<select name="language" id="language" >
<option value='<?php echo $queryArray["language"];?>'><?php echo $queryArray["language"]; ?></option>
<?php if ($queryArray["language"] == "Hindi") { ?>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
<?php } elseif ($queryArray["language"] == "Urdu") { ?>
<option value="Punjabi">Punjabi</option>
<option value="Hindi">Hindi</option>
<?php } elseif ($queryArray["language"] == "Punjabi") { ?>
<option value="Urdu">Urdu</option>
<option value="Hindi">Hindi</option>
<?php } ?>

How to change a second select list based on the first select list option when values are dynamic?

I have php page for vehicle search filter which have 2 types of vehicle that is RV's and campervans and also have two selects
<div class="fields">
<p>Vehicle Type</p>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<?php if(count($vehicleType) > 0 ){
foreach($vehicleType as $vt){ ?>
<option value="<?php echo $vt ?>" <?=isset($_GET['car_type'])&&$_GET['car_type']==$vt?'selected':'';?> ><?php echo $vt ?></option>
<?php }
} ?>
</select>
</div>
<div class="fields">
<p>Total No. of Passengers*</p>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<option <?php if(#$_REQUEST['passengers'] == 1){?>selected<?php }?>>1</option>
<option <?php if(#$_REQUEST['passengers'] == 2){?>selected<?php }?>>2</option>
<option <?php if(#$_REQUEST['passengers'] == 3){?>selected<?php } ?>>3</option>
<option <?php if(#$_REQUEST['passengers'] == 4){?>selected<?php }?>>4</option>
<option <?php if(#$_REQUEST['passengers'] == 5){?>selected<?php }?>>5</option>
<option <?php if(#$_REQUEST['passengers'] == 6){?>selected<?php }?>>6</option>
<option <?php if(#$_REQUEST['passengers'] == 7){?>selected<?php }?>>7</option>
<option <?php if(#$_REQUEST['passengers'] == 8){?>selected<?php }?>>8</option>
</select>
</div>
How do I do that with jQuery or php if I choose "Rv" in the first select? The second select would show me 8 passengers . If I choose Campervan in the first select, the second select would show me 5 passengers..

I would probably do something along these lines:
<?php
$number_of_passengers = 8;
if(!empty($_REQUEST['car_type'])) {
$number_of_passengers = $_REQUEST['car_type'] == 'Campervans' ? 5 : 8;
}
$passengers = 0;
if(!empty($_REQUEST['passengers'])){
$passengers = (int) $_REQUEST['passengers'];
}
?>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<option value="RV/Motorhome">RV/Motorhome</option>
<option value="Campervans">Campervans</option>
</select>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<?php
for($i = 1; $i <= $number_of_passengers; $i++) {
?>
<option
<?php
if($i == $passengers) {
echo ' selected ';
}
?>
>
<?php echo $i ?>
</option>
<?php
}
?>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#car_type').change(function() {
$("#passengers").children().removeAttr("selected");
if ($(this).val() === 'Campervans') {
$('#passengers option:nth-child(n+7)').hide();
} else {
$('#passengers option').show();
}
});
</script>
There are cleaner ways of doing this but this should serve to get the point across.
Few things to note about the PHP:
See how I check if the $_REQUEST key is available using empty - this avoids having to use # which is generally not a good idea.
I am using a loop to echo the options in the passenger select to avoid code repetition because typing that out 8 times is boring ;-)
Hope this helps!

yes you need to add javascript code for that.
insert below code in your page and check if this is what you want?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('.car').on('change', function(){
if($(this).val() === 'RV/Motorhome'){
$('.half').find('option').show()
}else if($(this).val() === 'Campervans'){
$('.half').find('option').slice(6).hide();
}
})
</script>

angularjs interferes with echoing php variable

I'm trying to pull a php variable ($purpose) and show it on the option select. The code that I have (see below) only works when I took out the element attribute ng-model="purpose". If I left the ng-model in-placed, the option select showed Purpose, which indicated php echoinng is did not go through. It seems echoing php variable and using angularjs conflicting with one another. Does anyone have this issue? Is there a workaround?
<select id="purpose" class="form-control custom-select" name="purpose" value="<?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" ng-model="purpose" autocomplete="on" required/>
<option <?php if($purpose == "") echo 'selected';?> value="">Purpose</option>
<option <?php if($purpose == "1030") echo 'selected';?> value="1030">1Exchange</option>
<option <?php if($purpose == "1040") echo 'selected';?> value="1040">Non-exchange</option>
<option <?php if($purpose == "1050") echo 'selected';?> value="1050">Financing</option>
</select>

Don't use value attribute when using ng-model. Just initialize a variable purpose & assign PHP variable to it. Like below:
<select ng-init="purpose = <?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required/>
<option <?php if($purpose == "") echo 'selected';?> ng-value="">Purpose</option>
<option <?php if($purpose == "1030") echo 'selected';?> ng-value="1030">1Exchange</option>
<option <?php if($purpose == "1040") echo 'selected';?> ng-value="1040">Non-exchange</option>
<option <?php if($purpose == "1050") echo 'selected';?> ng-value="1050">Financing</option>
</select>

While you might be able to get it work using this style, it is recommended to use JSON to populate data from back-end to angular.
<?php
$purpose_arr = array(
"1030" => "1Exchange",
"1040" => "Non-exchange",
"1050" => "Financing"
);
echo "<script> var purpose='" + json_encode($purpose_arr) + "'; </script>"
?>
html:
<select id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required
ng-options="value as key for (key, value) in purpose" />
<option value="">Purpose</option>
</select>
controller:
$scope.purpose = purpose;

how to change a drop down options to default selected using jquery

Below code is part of my a html form drop down menu:
<div class="wrap-quest-resp" id="fa8">
<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>
</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>
</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>
I a using this jquery to hide above mentioned div and its drop down selection
$('#fa8').slideUp("fast");
I would like to change the option selected to its default SELECTED option while hiding the div . That is to below options for all three drop down menus
<option disabled="disabled" SELECTED >Dir</option>
<option disabled="disabled" SELECTED >Proc</option>
<option disabled="disabled" SELECTED >Port</option>

Since you appear to want all of the selects to go to their default values, I'd suggest using this:
$('#fa8').find("select").find("option:first").prop("selected", true);
Depending on how your code is implemented, you could make it part of a callback, as tymeJV suggested, or simply place it on the next line after the slideUp call in the code.
If you use the callback, you can use $(this) instead of $('#fa8'):
$('#fa8').slideUp("fast", function() {
$(this).find("select").find("option:first").prop("selected", true);
});
If you go for the "multi-line" approach, store off the selector for $('#fa8') in a variable, so that you are not running the select twice:
var $wrapReqResp = $('#fa8');
$wrapReqResp.slideUp("fast");
$wrapReqResp.find("select").find("option:first").prop("selected", true);

Use the callback from slideUp and set the 0 index of each to selected via prop()
$('#fa8').slideUp("fast", function() {
//Set the 0 index as selected
$("#fa-select-8 option").eq(0).prop("selected", true);
//do the same for the rest, change the ID
});

Combo box's default combination

I have two combo boxes, one for 'order by' and the other 'direction' (ascending, descending)
I am wondering what is the simplest way to have a default combination... e.g order by A-Z I would want ascending by default and order by views I would want descending by default.
I guess, onChange on the order combobox calling a JS function to set the value of the other combo box... but is there a simpler way?
Here are my comboboxes
<label>Order by:
<select name="o" id="o" onChange="menu.submit();">
<option value="0" <?php if($_GET['o'] == 0) echo 'selected="selected"'; ?>>A - Z</option>
<option value="1" <?php if($_GET['o'] == 1) echo 'selected="selected"'; ?>>Number of Views</option>
</select>
</label>
<label>Direction:
<select name="d" id="d" onChange="menu.submit();">
<option value="0" <?php if($_GET['d'] == 0) echo 'selected="selected"'; ?>>Ascending</option>
<option value="1" <?php if($_GET['d'] == 1) echo 'selected="selected"'; ?>>Descending</option>
</select>
</label>

Why not set the direction based on the order?:
<label>Order by:
<select name="o" id="o" onChange="menu.submit();">
<option value="0" <?php if($_GET['o'] == 0) echo 'selected="selected"'; ?>>A - Z</option>
<option value="1" <?php if($_GET['o'] == 1) echo 'selected="selected"'; ?>>Number of Views</option>
</select>
</label>
<label>Direction:
<select name="d" id="d" onChange="menu.submit();">
<option value="0" <?php if($_GET['o'] == 0) echo 'selected="selected"'; ?>>Ascending</option>
<option value="1" <?php if($_GET['o'] == 1) echo 'selected="selected"'; ?>>Descending</option>
</select>
</label>
Edit: LOL, nm you don't need the tenary operator to do the same thing. Oops, I think I hit the back button or something.. it made me double post.
And, yes you could use javascript to set a default option in the direction selector, but maybe it would be better to have a submit button instead? This gives the user more control over the selectors without causing a page reload.