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();
Related
i am trying to show a value from database to show in select option
running in PHP,JSON,AJAX,JQUERY
$(document).on('click', '.edit_data', function () {
var shop_id = $(this).attr("id");
$.ajax({
url: "<?php echo base_url();?>dashboard/update_shop",
method: "POST",
data: {shop_id: shop_id},
dataType: "json",
success: function (data) {
$('#emp_name').value = data[0].emp_id;
console.log(data[0].emp_id);
$('#shop_name').val(data[0].shop_name);
$('#shop_owner').val(data[0].shop_owner);
$('#shop_phone').val(data[0].shop_phone);
$('#shop_dist').val(data[0].shop_district);
$('#shop_loc').val(data[0].shop_location);
$('#shop_code').val(data[0].shop_code);
$('#shop_id').val(data[0].shop_id);
$('#latitude').val(data[0].latitude);
$('#longitude').val(data[0].longitude);
$('#create_button').text("Update");
$('#createOrder').modal('show');
}
});
});
i expect the out put comes like show data[0].emp_id as selected and show other option in dropdown
As your question is
how do i show selected value in option using jquery
and I can't comment as my reputation is below 50.
your answer should be $('#idOfSelectTag').val('3')
$(document).ready(function(){
$('#txtValue').change(function(){
changeValue($(this).val());
});
});
function changeValue(){
var value = $('#txtValue').val();
value = value==''? 1: value;
$('#selTest').val(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selTest">
<option value="1">one</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<br />
<input type="text" id="txtValue" />
<br />
<button onclick="changeValue(4)">Change Value</button>
you can also using php without jquery.
<select class="custom-select col-12" id="lcount" name="lcount" data-validation="required" >
<option value="0" <?php if($sdata['lcount']=='0') echo 'selected="selected"'; ?>>select</option>
<option value="1" <?php if($sdata['lcount']=='1') echo 'selected="selected"'; ?>>1</option>
<option value="2" <?php if($sdata['lcount']=='2') echo 'selected="selected"'; ?>>2</option>
<option value="3" <?php if($sdata['lcount']=='3') echo 'selected="selected"'; ?>>3</option>
<option value="4" <?php if($sdata['lcount']=='4') echo 'selected="selected"'; ?>>4</option>
<option value="5" <?php if($sdata['lcount']=='5') echo 'selected="selected"'; ?>>5</option>
</select>
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/
In my html form i have 9 drop down values which if user action is Edit then it will fetch the values from database and return in the jsonencode format.as below,
JSON DATA
[{"ed_gender":"Male","ed_blood_group":"A-","ed_marital_status":"Single","ed_branch_id":"11","ed_desig_id":"1","ed_job_type":"Permanent","ed_pay_mode":"Cheque"}]
HTML
<select name="ed_gender" class="form-control">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select name="ed_marital_status" class="form-control">
<option value="">Select</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
</select>
I tried few lines of code using php its actually works but i am trying using javascript.
PHP
<select name="ed_marital_status" class="form-control">
<option value="">Select</option>
<option <?php if($ed_marital_status=="Single") echo 'selected="selected"'; ?> value="Single">Single</option>
<option <?php if($ed_marital_status=="Married") echo 'selected="selected"'; ?> value="Married">Married</option>
</select>
So here Behave i have to extract the json values and make dropdown values has "Selected" on page loads.
EDITED :
JSON DATA
[{"ed_branch_id":"11","ed_desig_id":"1"}]
HTML
<select name="ed_job_location" class="form-control">
<option value="">Select</option>
<?php
foreach($get_branches as $branches){
$branches_id = $branches->b_id;
$branches_name = $branches->b_name;
$branches_code = $branches->b_code;
echo "<option value='$branches_id||$branches_name||$branches_code'>$branches_name</option>";
}?>
</select>
<select name="ed_desig_id" class="form-control">
<option value="">Select</option>
<?php
foreach($get_designation as $designations){
$designations_id = $designations->d_id;
$designations_name = $designations->d_designation;
$designations_code = $designations->d_code;
echo "<option value='$designations_id||$designations_code'>$designations_name</option>";
}?>
</select>
Here from above json, i am getting only branch id and desig id, But here i have value with || symbol in the select option, so i need to find particular id and show it in the drop down.
Iterate through the array of json objects and fill each element value by selecting it through its name:
var json = [{"ed_gender":"Male","ed_blood_group":"A-","ed_marital_status":"Single","ed_branch_id":"11","ed_desig_id":"1","ed_job_type":"Permanent","ed_pay_mode":"Cheque"}];
$(document).ready(function(){
$.each(json[0], function(index, element) {
$("[name="+index + "]").val(element);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ed_gender" class="form-control">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select name="ed_marital_status" class="form-control">
<option value="">Select</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
</select>
EDIT:
You can explicitly set the values to cover the special case of branch values concatenation with || outside the loop, as long as the values are within the json data returned :
$(document).ready(function(){
$("[name=ed_job_location]").val(json[0].branches_id + "||" + json[0].branches_name + "||" + json[0].branches_code);
});
I have a script where I am trying to only import fields that are not disabled to mysql.
my problem is that when its disabled it still imports the field that is in the selection
function toggleCatDisability()
{
document.getElementsByClassName('cat_border')[0].disabled = false;
document.getElementsByClassName('tech_border')[0].disabled = true;
document.getElementsByClassName('splatter_border')[0].disabled = true;
document.getElementsByClassName('fancy_border')[0].disabled = true;
}
function toggleTechDisability()
{
document.getElementsByClassName('tech_border')[0].disabled = false;
document.getElementsByClassName('cat_border')[0].disabled = true;
document.getElementsByClassName('splatter_border')[0].disabled = true;
document.getElementsByClassName('fancy_border')[0].disabled = true;
}
<center>
<input type="button" value="Update Tag" onClick="updateTagSettings()" />
</center><br /><br /><div id="ajax_spot" style="text-align:center;"></div>
<center><input type="text" id="tag_name" value="" maxlength="15"/>
<div>
</div>
<div>
Border Style:
<div>
<input type="button" value="Kitten"onclick="toggleCatDisability()"/>
</select>
Color:<select id="tag_border" class="cat_border" disabled="disabled">
<option value="Border_Cat_Black.png">Black</option>
<option value="Border_Cat_DBlue.png">Dark Blue</option>
<option value="Border_Cat_LBlue.png">Light Blue</option>
<option value="Border_Cat_Green.png">Green</option>
<option value="Border_Cat_Orange.png">Orange</option>
<option value="Border_Cat_Pink.png">Pink</option>
<option value="Border_Cat_Purple.png">Purple</option>
<option value="Border_Cat_Red.png">Red</option>
<option value="Border_Cat_Yellow.png">Yellow</option>
</select>
</div>
</div>
<div>
<input type="button" value="Tech"onclick="toggleTechDisability()"/>
Color:<select id="tag_border" class="tech_border" disabled="disabled">
<option value="Border_Cat_Black.png">Black</option>
<option value="Border_Cat_DBlue.png">Dark Blue</option>
<option value="Border_Cat_LBlue.png">Light Blue</option>
<option value="Border_Cat_Green.png">Green</option>
<option value="Border_Cat_Orange.png">Orange</option>
<option value="Border_Cat_Pink.png">Pink</option>
<option value="Border_Cat_Purple.png">Purple</option>
<option value="Border_Cat_Red.png">Red</option>
<option value="Border_Cat_Yellow.png">Yellow</option>
</select>
</div>
<div>
Background:<select id="tag_bg" >
<option>Choose Color</option>
<option value="BG_Black.png">Black</option>
<option value="BG_DBlue.png">Dark Blue</option>
<option value="BG_LBlue.png">Light Blue</option>
<option value="BG_Green.png">Green</option>
<option value="BG_Orange.png">Orange</option>
<option value="BG_Pink.png">Pink</option>
<option value="BG_Purple.png">Purple</option>
<option value="BG_Red.png">Red</option>
<option value="BG_Yellow.png">Yellow</option>
</select>
</div>
<div>
</div>
</center>
<div class="clear"></div>
</div>
</div>
Edit: PHP and Javascript-
PHP
function updateTagValues() {
global $logon;
$tag_name= mysql_real_escape_string($_POST['tagname']);
$tag_bg= mysql_real_escape_string($_POST['tagbg']);
$tag_border= mysql_real_escape_string($_POST['tagborder']);
$tag_decal= mysql_real_escape_string($_POST['tagdecal']);
mysql_query("UPDATE gamezove_deciet.groups SET leader_name = '" . $logon->username . "', name='" . $tag_name . "', bg='" . $tag_bg . "', border='" . $tag_border . "', decal='" . $tag_decal . "' WHERE `leader_name`='" . $logon->username . "'", $this->c) or die("Something went wrong, please try again!");
if (strlen($password) > 0){
echo "Your tag have been updated!";
if(strlen($password) > 0){
$logon->logout();
}
}
}
Javascript/jQuery
function saveTagSettings() {
var tagname = $("#tag_name").val()
var tagbg = $("#tag_bg").val()
var tagborder = $("#tag_border").val()
var tagdecal = $("#tag_decal").val()
$("#ajax_spot").html("<img src='theme/" + theme + "/images/ajax.gif' />")
$.post("inc/forum_ajax.php", { ajax: 19, tagname: tagname, tagbg: tagbg, tagborder: tagborder, tagdecal: tagdecal}, function(data) {
$("#ajax_spot").html(data)
});
}
I know that there is a way to do this I just don't know how.
I'm guessing I need to do more with the disable function but not exactly sure what.
any help would be greatly appreciated:)
I've found some code via google that I could use it should be corrected to fit my but when I select something from my drop down menu, nothing happens. have no idea of what I'm doing wrong.
<select name="h1" id="h1">
<?php
echo "<option value=".$rowlift['H1'].">".$rowlift['H1']."</option>";
$pris = mysql_query("SELECT * FROM priser ORDER BY id ASC");
while($rowP = mysql_fetch_assoc($pris))
echo "<option value='".$rowP['pris'].",".$rowP['id']."'>".$rowP['hojde']. "</option>";
?>
</select>
<?php
if($rowlift['p1'] != '')
echo "<input type='text' id='pris1' name='p1' value='".$rowlift['p1']."'>";
else
echo "<input type='text' id='pris1' name='p1'>"
?>
<script type="text/javascript">
var mytextbox = document.getElementById('pris1');
var mydropdown = document.getElementById('h1');
var mySplitResult = mydropdown.split(",");
mydropdown.onchange = function(){
mytextbox.value = mySplitResult[0];
}
</script>
i hope this the think you was looking for.. when i select something nothing happens.
<select name="h1" id="h1">
<option value=""></option>
<option value="80,1">1000m</option>
<option value="90,2">1200m</option>
<option value="100,3">1500m</option>
<option value="110,4">2000m</option>
<option value="120,5">2250m</option>
<option value="130,6">2500m</option>
<option value="140,7">3000m</option>
<option value="150,8">3500m</option>
<option value="160,9">4000m</option>
<option value="160,10">Elev man.</option>
<option value="160,11">Elev auto</option>
<option value="0,12">HM</option>
<option value="2000,13">Tandem pass u/video</option>
<option value="2300,14">Tandem håndhold video</option>
<option value="2600,15">Tandem pass m/video</option>
<option value="0,16">Tandem master</option>
<option value="-100,17">Tandem video</option>
</select>
<td>
<input type="text" id="pris1" name="p1"> <script type="text/javascript">
var dropdownId = document.getElementById("h1");
var mytextbox = document.getElementById('pris1');
var mySplitResult = strUser .split(",");
dropdownId.onchange = function(){
mytextbox.value = mySplitResult[1] //to (not) appened
//mytextbox.innerHTML = this.value;
}
</script>
</td>
I think it should be mydropdown.value.split(',');
var dropdownId = document.getElementById("yourdropdownId");
var strUser = dropdownId .options[dropdownId .selectedIndex].value;
var mySplitResult = strUser .split(",");
wrap the above code in onchange()
this is how it should be.. :D
<select name="sel1" id="sel1" onchange ="show()" >
<option value="">Choose .....</option>
<option value="80~1">1000m</option>
<option value="90~2">1200m</option>
<option value="100~3">1500m</option>
<option value="110~4">2000m</option>
<option value="120~5">2250m</option>
<option value="130~6">2500m</option>
<option value="140~7">3000m</option>
<option value="150~8">3500m</option>
<option value="160~9">4000m</option>
<option value="160~10">Elev man.</option>
<option value="160~11">Elev auto</option>
<option value="0~12">HM</option>
<option value="2000~3">Tandem pass u/video</option>
<option value="2300~14">Tandem håndhold video</option>
<option value="2600~15">Tandem pass m/video</option>
<option value="0~16">Tandem master</option>
<option value="-100~17">Tandem video</option>
</select>
<td>
<input type="text" id="pris1" name="pris1">
<script type="text/javascript">
function show() {
var dropdownId = document.getElementById("sel1").value;
var mytextbox = document.getElementById('pris1');
var mySplitResult = dropdownId .split("~");
mytextbox.value = mySplitResult[0];
}
</script>