<?php
include ("Includes/DB_config.php");
//Define dropdown menu
echo "<select name=\'ProjectName\'>\n";
echo "<option value=\"NULL\">Select your project</option>\n";
//Select data from the database
$result = mysql_query("SELECT ProjectID,ProjectName FROM tb_project");
//Fetch data & Populate dropdown menu
while($row=mysql_fetch_array($result))
{
$pjt_id = $row['ProjectID'];
$pjt_name = $row['ProjectName'];
echo "<option value=\"$pjt_id\">$pjt_name</option>\n";
}
echo "</select>";
?>
Edit
You can use javascript to achieve this.
JAVASCRIPT
function upperCase(x)
{
var e = document.getElementById("editButton");
e.href = "/www/gdis_sys_test/Project_Setup_Display.php?id=" + x;
}
HTML
<select onchange="upperCase(this.value)">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
<a id="editButton" href="/www/gdis_sys_test/Project_Setup_Display.php?id=1">Edit</a>
Example: http://jsfiddle.net/brenjt/WaA92/
Related
I am working in multiple dropdown menu. I have created an array from php and it looks like this:
https://api.myjson.com/bins/1emzic
Now from this json I want to display 4 dropdown menu.
In the first drop down I need to display
"FS A", "FS MT" and "FS OTHER"
Based on the first selection I need to display its related data in second third and fourth and so on as I add in my data.
This is what I need to bind
<select [(ngModel)]="first" id="first">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="second" id="second">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="third" id="third">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="four" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
Here is my json data
{"FS A":{"BKK":{"BKK PULL":{"BKK SR1":[]},"BKK PUSH":{"BKK BCDE1":[],"BKK BAKE SE1":[]}},"RSM2":{"CHIANGMAI":{"CMI WS SE1":[],"CMI WS SE2":[]},"NORTH":{"NO1 SE1":[],"NO2 SEPLUS1":[],"NO3 SE1":[]},"ASM HOTEL BKK":{"BKK HO 5STARS1":[],"BKK HO SR1":[],"BKK HO SR2":[],"BKK HO SR3":[]}}},"FS MT":{"FSR1":{"FSA1":{"FS MAKRO":[]}},"FSR2":{"FSA2":{"FS FOODLAND":[],"FS GAS STATION":[],"FS VILLA MARKET JP":[],"SIAM FOODSERVICE":[]}},"FS LOCAL EXP":{"FS LOCAL EXP BKK":{"FS LOCAL EXP BKK":[]},"FS LOCAL EXP CD":{"FS LOCAL EXP CD":[]},"FS LOCAL EXP MM":{"FS LOCAL EXP MM":[]}}},"FS OTHER":{"FS OTHER":{"FS OTHER":{"FS OTHER":[]}}}}
Can anybody help me in this?
Here I am working:
https://stackblitz.com/edit/angular-dsylxi
You need to define the dependency on each other and based on that you can fill the models and its options. I will go for generic solution which can be applied with one function and works for all the drop-downs.
This are the model variables you need
wholeList:any = [];
first:any = [];
second:any = [];
third:any = [];
four:any = [];
firstModel = ''
secondModel = ''
thirdModel = ''
fourModel = ''
Then first you fill the first dropdown
this.testService.get_data().subscribe(
res => {
this.wholeList = res;
this.first = Object.keys(this.wholeList).map(a=> a);
console.log("res", this.first);
},
err => {
console.log(err);
}
)
Then in the view you need to fire a dependency which should look like this, note that I am defining dependency ChangeDropdown(this.wholeList[firstModel],'second')"
<select [(ngModel)]="firstModel" id="first" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of second" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="thirdModel" id="third" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel][thirdModel],'four')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of third" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="fourModel" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of four" [value]="item">{{item}}</option>
</select>
and finally one common function which will update the models
ChangeDropdown = (value,dropdownName) =>{
this[dropdownName] = Object.keys(value).map(a=>{
return a;
})
}
Demo
I want to set values as selected at initial loading of my page but I'm not able to set them.
Here is my HTML markup:
<select multiple id="access_rights">
<option value="default" disabled selected>Choose your options</option>
<option value="create">Create</option>
<option value="read">Read</option>
<option value="update">Update</option>
<option value="delete">Delete</option>
</select> <label>Select Access Rights</label>`
Now I want 'Create' and 'Update' as default selected at first loading of page.
How can I do that?
See Working Demo :
$(document).ready(function() {
$('select').material_select();
});
var selectedOptions=[
"create",
"update"
];
$.each(selectedOptions, function(i,e){
$("#access_rights option[value='" + e + "']").prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<label for="access_rights">Select Access Rights</label>
<select id="access_rights" multiple>
<option value="default" disabled>Choose your options</option> <option value="create">Create</option> <option value="read">Read</option> <option value="update">Update</option> <option value="delete">Delete</option> </select>
Just use selected in create and update option. For Ex:-
<select multiple id="access_rights">
<option value="default" disabled>Choose your options</option>
<option value="create" selected>Create</option>
<option value="read">Read</option>
<option value="update" selected>Update</option>
<option value="delete">Delete</option> </select>
<label>Select Access Rights</label>
$( document ).ready(function() {
$(".select-wrapper").each(function() {
var wrapper = this;
$(this).find("ul>li").each(function() {
var li = this;
var option_text = $(this).text();
$(wrapper).find("select option:selected").each(function() {
var selected_text = $(this).text();
if(option_text == selected_text) {
//$(li).addClass("active selected");
//$(li).find("input").prop('checked', true);
$(li).click();
}
});
});
});
});
I am unable to select an option dynamically using select commands by value, visible text or index, the workaround was i can use actions to click select and select a particular option or sending keys ArrowDown which is not a best way to implement because i want to use the same select function globally to automate UI all over the website like a keyword function.
sample script below:
WebElement selectElement = driver.findElement(By.xpath(.//*[#id='XYZPopUpForm:j_idt90:country_label']));
Actions selectItem = new Actions(driver);
selectItem.moveToElement(selectElement).click().perform();
selectItem.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).perform();
selectItem.sendKeys(Keys.ENTER).perform();
HTML Code :
<tr>
<td>
<label for="XYZPopUpForm:j_idt90:country">Country</label>
</td>
<td>
<div id="XYZPopUpForm:j_idt90:country" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<div class="ui-helper-hidden-accessible">
<select id="XYZPopUpForm:j_idt90:country_input" tabindex="-1" name="XYZPopUpForm:j_idt90:country_input">
<option selected="selected" disabled="disabled">--select--</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
</select>
</div>
Updated Script:
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } } ", selectElement, "Afghanistan");
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("XYZPopUpForm:j_idt90:country_input")));
Screenshot of HTML to be more clear :
Seems you are finding incorrect element By.xpath your drop-down id looks like XYZPopUpForm:j_idt90:country_input but you are finding id XYZPopUpForm:j_idt90:country_label in By.xpath, May be that is the problem. Try using Select with correct drop-down id as below :-
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
//Now use select
Select select = new Select(selectElement);
select.selectByVisibleText("Afghanistan");
or
sel.selectByIndex(1);
or
sel.selectByValue("AF");
Edited :- If above does not work due to visibility of element you should try using JavascriptExecutor as below :-
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", selectElement, "Afghanistan");
Hope it works...:)
I am using bootstrap framework to create a simple form that will be used to edit a SQL db record. To be concise, I have only posted a small snippet of code, a Select List input only. How do I automatically set a specific value from the list? I expected that I could use
<select class="form-control" id="..... value="Option1">
but that did not work. My ultimate outcome is to set the value using a SQL query.
<!--- Location Drop Down--->
<form class="form-horizontal" role="form" method="post" action="post_record.php">
<div class="form-group">
<label for="inputLocation" class="col-sm-2 control-label">Location</label>
<div class="col-sm-4">
<select class="form-control" id="inputLocation" name="inputLocation" value="Option1">
<option value="0">Please Select</option>
<option value="1">Option1</option>
<?php
$servername = "localhost";
$username = "*********";
$password = "*********";
$dbname = "**********";
// Create Connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (!$conn) {
trigger_error("Connection failed: " . mysqli_connect_error());
}
if ($conn) {
echo "success";
}
$stmt = "SELECT DISTINCT `ACT_LOCATION` FROM `actual_data`";
$result = mysqli_query($conn,$stmt) or die(mysqli_error());
while(list($category) = mysqli_fetch_row($result)){
echo '<option value="'.$category.'">'.$category.'</option>';
}
?>
</select>
</div>
</div>
Add attribute selected="selected" for the <option> that you want to be default selected option :
<option value="1" selected="selected">Option1</option>
this is my code for dropdown list,plz guide me.
<div class = "form-inline">
<label class = "">Situation</label>
<select selected="" name="sit" id="situ" class='form-control'style="margin-left: 30px; width: 145px;">
<option value="" >select</option>
<?
if ($situation != '') {
$revise = $situation;
}
foreach ($revise as $row):
?>
<option value="<?= $row['id']; ?>"><?= $row['situation']; ?></option>
<? endforeach; ?>
</select>
</div>
For the item you want selected for a dropdown list, add the attribute selected.
Eg.
<select>
<option value="0">0</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>
In this case, 1 will be selected.
To get the value of this dropdown after form submit, it depends on the method of your form being POST or GET.
In this example, I'm assuming it's POST. <form method="POST">
<div class = "form-inline">
<label class = "">Situation</label>
<select selected="" name="sit" id="situ" class='form-control'style="margin-left: 30px; width: 145px;">
<option value="" >select</option>
<?
if (isset($_POST['sit']))
$selected = $_POST['sit'];
if ($situation != '') {
$revise = $situation;
}
foreach ($revise as $row):
$selectedHTML = '';
if (isset($selected) && $row['id'] == $selected)
$selectedHTML = ' selected="selected"';
?>
<option value="<?= $row['id']; ?>"<?= $selectedHTML; ?>><?= $row['situation']; ?></option>
<? endforeach; ?>
</select>
</div>
You can try something like this.
if (isset($_POST['sit']))
$selected = $_POST['sit'];
What this does is check if $_POST['sit'] value is found. If yes then we'll make that $selected, else we'll leave it.
$selectedHTML = '';
if (isset($selected) && $row['id'] == $selected)
$selectedHTML = ' selected="selected"';
And then in the foreach loop, we will first initialize $selectedHTML as empty string. It will not add anything to <option> unless it got its value changed.
We will check if $selected is defined or not and if it is, we will check if the current value of $row['id'] within the foreach loop is equal to the submitted value which is $selected. If so, we will set $selectedHTML which will add selected="selected" only to the current <option>.