how to hide original dropdown list in select2 - javascript

I want to use select2 for my dropdown list. The options are from a database query. What I got is there are two dropdown lists showing. The first one is the original dropdown and the second is using select2.
The select code is:
<select name="city" id="select-city" class="form-control">
<option></option>
<?php foreach ($cities as $ct) : ?>
<option value="<?php echo $ct->id ?>"><?php echo $ct->name ?></option>
<?php endforeach; ?>
</select>
And the javascript is:
<script>
$(document).ready(function () {
$("#select-city").select2();
});
</script>
I want to hide the original dropdown. How can I do this?

Related

Can't set the selected value using jquery chosen plugin

I'm using the chosen plugin from jquery and I want to get the selected value option from my select menu. In my source code, it shows the option that was select previously, from the database. But the selected option doesn't appear.
This is my script:
<script type="text/javascript">
var selectedDistrict = 0;
$(document).ready(function () {
$('#class_of_my_select').chosen();
$("#class_of_my_select").change(function () {
selectedDistrict = $("#class_of_my_select").val();
$("#class_of_my_select").trigger("chosen:updated").val(selectedDistrict);
});
});
And this is my form:
form.php
<select style="width: 390px;display: inline-block;" class="input-sm form-control" name="class_of_my_select" id="class_of_my_select" type="text">
<option value=""></option>
<?php foreach ($list as $key){ ?>
<option value="<? echo $key->id; ?>" ><? echo $key->name; ?></option>
<?}?>

Onchange select menu

I have 2 select menu :
<select name="nama_paket">
<?php
do {
?>
<option value="<?php echo $row_qpaket['nama_paket']?>"><?php echo $row_qpaket['nama_paket']?></option>
<?php
} while ($row_qpaket = mysql_fetch_assoc($qpaket));
$rows = mysql_num_rows($qpaket);
if($rows > 0) {
mysql_data_seek($qpaket, 0);
$row_qpaket = mysql_fetch_assoc($qpaket);
}
?>
</select>
and
<select name="harga">
<?php
do {
?>
<option value="<?php echo $row_qpaket['harga']?>" ><?php echo $row_qpaket['harga']?></option>
<?php
} while ($row_qpaket = mysql_fetch_assoc($qpaket));
?>
</select>
when we select the first select menu the second select menu change automatically? Thanks
If you want to change it Dynamically when according to 1st selected value, you need to use ajax in order to do this
this answer explain it
You need to get select name="hagra" via AJAX after selecting select name="nama_paket"
You can use Jquery .change() event for this. Like:
$('select[name=nama_paket]').change(function(){
// your code you can set different value to second select box
})

php html form select option to populate text field jquery

I'm editing a wordpress plugin:
It currently has a dropdown option list for a user, and based on that user, I want to fill a text field with that users email.
selection option dropdown:
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
The customer email is stored in $Customer->Customer_Email
And Im trying to fill in the following value when a user changes the selected user:
<div class="form-field">
<label for="Order_Email"></label>
<input type='text' name="Order_Email" id="Order_Email" />
</div>
I've played around with filling the Order_Email with the following script, but it just sents the value as the customer_id. How do I change the value to the email
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#Customer_ID').on('change', function () {
var selection = $(this).val();
$('#Order_Email').val(selection);
});
});
</script>
You could just add a title attribute to the options to equal whatever the email value is:
Play around with it here: http://jsfiddle.net/7BUmG/3876/
This might not be the best solution and hacky, but it should do the trick. This will also break after the plugin is updated
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option title='<?php echo $Customer->Customer_Email; ?>'value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
and
$(document).ready(function(){
$('#Customer_ID').change(function() {
var email = $(this).find("option:selected").attr("title");
$('#Order_Email').val(email);
});
});

Trying to populate a multiselect from another file using jquery

I am getting my data from another page to populate an input, but I don't know how to populate a multi-select with that data. Here's my multi select:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
<?php foreach(WorkModel::Work_List() as $work): ?>
<option value="<?php echo System::escape($work->we_id); ?>"><?php echo System::escape($work->we_name); ?></option>
</select>
To populate it, I need to separate the options with the following data from my JSON:
For example: json_required_name
Many times, there's more than one (would have used a foreach loops, but my page loads before the modal, which grabs the data from another page).
Here is my JSON sample:
{"name":"Gev Offshore","description":"","duration":"1","country":"United Kingdom","employer":"gev offshort","start_date":"2015-08-01","job_start":"2015-08-21","job_end":"2015-08-21","requirements":[{"id":"1","name":"IRATA Level 1 Technician"},{"id":"2","name":"IRATA Level 2 Technician"},{"id":"3","name":"IRATA Level 3 Technician"},{"id":"4","name":"Equipment and Hardware Related"},{"id":"5","name":"NDT Aerospace"},{"id":"6","name":"NDT ECI"},{"id":"7","name":"NDT General"},{"id":"8","name":"NDT MPI"},{"id":"9","name":"NDT Radiography"},{"id":"10","name":"NDT Ultrasonic"},{"id":"11","name":"Rigging"},{"id":"12","name":"Rope Access"},{"id":"13","name":"Rope Access \/ NDT Management"}]}
Is this what you're looking for:
http://jsfiddle.net/1jjps0mv/
Html:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
</select>
Javascript:
var xreturn = {"name":"Gev Offshore","description":"","duration":"1","country":"United Kingdom","employer":"gev offshort","start_date":"2015-08-01","job_start":"2015-08-21","job_end":"2015-08-21","requirements":[{"id":"1","name":"IRATA Level 1 Technician"},{"id":"2","name":"IRATA Level 2 Technician"},{"id":"3","name":"IRATA Level 3 Technician"},{"id":"4","name":"Equipment and Hardware Related"},{"id":"5","name":"NDT Aerospace"},{"id":"6","name":"NDT ECI"},{"id":"7","name":"NDT General"},{"id":"8","name":"NDT MPI"},{"id":"9","name":"NDT Radiography"},{"id":"10","name":"NDT Ultrasonic"},{"id":"11","name":"Rigging"},{"id":"12","name":"Rope Access"},{"id":"13","name":"Rope Access \/ NDT Management"}]};
$(function() {
$.each(xreturn.requirements, function() {
$('#my_multi_select4').append('<option value="'+this.id+'">'+this.name+'</option>');
});
});
?
does your WorkModel::WorkList() return json or is it returning an associative array? If it is returning the latter, then your code should be mostly correct with the addition of the following:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
<?php foreach(WorkModel::Work_List() as $work): ?>
<option value="<?php echo System::escape($work->we_id); ?>"><?php echo System::escape($work->we_name); ?></option>
<?php endforeach; ?>
</select>
its necessary that you put the endforeach; block for it to know when to terminate the loop, otherwise it will keep repeating the loop over the select end tag.
now, if the former is true, then you want to first convert your data into an associateive array before performing your loop with json_decode like so:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
<?php foreach(json_decode(WorkModel::Work_List()) as $work): ?>
<option value="<?php echo System::escape($work->we_id); ?>"><?php echo System::escape($work->we_name); ?></option>
<?php endforeach; ?>
</select>

How to disable drop down option if present in DB

I have a drop down menu that is populated by an array. The goal is to have each value selected only once in the drop down to prevent duplicate column values.
I found some javascript that will disable each value after its selected, but if you reload the page, nothing is greyed out in the drop down (obviously).
How would I compare the array values with the database to disable values that are already selected in all the rows on load?
$(function(){
$('select').change(function() {
$current=$(this);
$("select").not($current).children(
"option[value='" + $current.val() + "']"
).attr('disabled', "disabled");
});
});
Drop Down Menu
<td>
<div class="grid_content editable">
<span><?php echo $records['equipment']; ?></span>
<select class="gridder_input select"
name="<?php echo encrypt("equipment|".$records['id']); ?>">
<?php
foreach($equipment as $equipments) {
?>
<option value="<?php echo $equipments; ?>"
<?php
if($equipments == $records['equipment']) {
echo 'selected="selected"';
}
?>>
<?php echo $equipments; ?>
</option>
<?php
}
?>
</select>
</div>
</td>
Is there an easier way to do this than what I've suggested? I think the closest solution I've found would work something like
$("select option:contains('Value')").attr("disabled","disabled");
Where value would be replaced with something that checks the DB. Or something like the answer found here using an if else statement

Categories