I have added a leaderboard feature to my website, but unfortunately the minimum score functionality for the leaderboard is not fully working.
So I have created a select element that triggers the setMinScore function which looks through each list element and hides it if its input.dial-list contains a value that is less than the minimum score - basically I want to show only list items that have scores greater than the minimum score.
However, two of my list items that have scores of "8" are still shown in the list when I select any minimum score apart from 80 and 90 (e.g. if I select 70 the list items are shown though they have inputs with values less than 70; but if I select 80 or 90, the items are not shown anymore so the functionality is working only for 80 and 90).
<select name="candList<?php echo $job['jobId']; ?>" onchange="setMinScore(this)">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50" selected>50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
</select>
<li>
<span class="list-content">
<div class="dial-list-holder">
<input type="text" value="<?php echo $row['score']; ?>" class="dial-list">
</div>
<div class="dial-list-holder">
<input type="text" value="<?php echo $row['matchScore']; ?>" class="dial-list-match">
</div>
<div class="name">
<h5><?php echo $row['name']; ?></h5>
</div>
</span>
</li>
And this is the javascript function:
function setMinScore(selectEl)
{
var minScore = $(selectEl).val();
var candList = "."+$(selectEl).attr('name');
$(candList).find('li').each(function() {
if($(this).find('input.dial-list').val() < minScore) {
$(this).hide();
}
else {
$(this).show();
}
});
}
Thanks guys, your help is highly appreciated!
I would add an id to select element and get the selected value in this was:
var minScore = $("#id option:selected").val();
instead of yours:
var minScore = $(selectEl).val();
Related
I have a html template file for my php code that loops a series of fields (first name, last name, date of birth, ...etc) for 6 people. One of these fields is the 'relationship' selector, and the options are: 'Spouse', or 'Child'. If 'Spouse' is selected, I would like to temporarily disable this option in the relationship selector for ALL people. If no Spouse is selected, this option can be chosen in any of the people's relationship selector.
I am very close to solving the problem. I am using jquery (code below), and the code does what I want it to do. The only problem is that it only looks at the first person in my loop. If I select 'Spouse' for persons 2-6, it still allows me to select this option for any other person in their relationship select. I want it to be disabled for all people if it is selected in any of the options.
<table>
<!-- People -->
<?php for ($i = 0; $i < $people_max; $i++) { ?>
<tr>
<td class="title" colspan="2">
<h2>PERSON <?= $i+1; ?></h2>
</td>
</tr>
...
<tr>
<td class="name<?= $carl_msg->getFieldMessageStyle($i . '-person_relationship_id'); ?>">Relationship:</td>
<td class="value">
<select tabindex="" id="relationship_select" class="select" onchange="disableSpouseOptionWhenSelected()" name="prgm_person[<?= $i; ?>][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<?php foreach ($selects['people'] as $person) { ?>
<option id="option" value="<?= $person['person_relationship_id']; ?>" <?php if ($person['person_relationship_id'] == $html['prgm_person'][$i]['person_relationship_id']) { ?>selected<?php } ?>><?= $person['person_relationship_name']; ?></option>
<?php } ?>
</select>
</td>
</tr>
...
<?php } ?>
<tr>
<td class="value">
<br />
<!-- Enable the top update buttons -->
<script language="JavaScript">
$(document).ready(function() {
disableSpouseOptionWhenSelected();
});
function disableSpouseOptionWhenSelected() {
$('select:first').on('change', function () {
$('option[value=1]').prop('disabled', this.value === '1');
});
}
</script>
</td>
<td></td>
</tr>
....
I have not included all the code in the file, only the relevant parts.
Expected: if the 'Spouse' option inside the relationship_select is selected for the first person, temporarily disable this option for ALL people's relationship_selects. However if 'Spouse' option is selected in persons 2-6, it still allows you to choose this for any other person.
Actual: if the 'Spouse' option inside the relationship_select is selected for ANY person, temporarily disable this option inside ALL of the relationship_select selectors (for each person).
Let me try to help you. First of all, as mentioned in comments you have to delete onchange handler from loop and you have to make select id unique. (using $i variable). And then after selects had been created you have to handle their changes using event-delegation api.
Few words about change handler.
If I had correctly understood your requirements You have to disable all 'spouse' options for all non first selects. So handler is checking if the select is the first or not, and if it is is setting prop('disabled') based on first select value. Please feel free to correct me if I wrongly understood your requirements.
$(document).on('change', '.select', function() {
const selects = $('.select');
const doesAnyoneIsSpouse = selects.filter(function(key) {
return $(selects[key]).val() === '1';
}).length > 0;
$('.select').not(this).find('option[value="1"]').prop('disabled', doesAnyoneIsSpouse);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[0][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[1][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[2][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[3][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
Trying to make a dependent select box.
I have two models, Areas and buildings, one area have many buildings, so in that case the parent select box will be (Areas) and the child is (Buildings).
On my php page i query all the areas row in parent select box , and query for all buildings in child select box.
First: The Parent select box (Areas):-
<select id="buildgs" onchange="showBuildings()">
#foreach ($areas as $a)
<option value="{{$a->name}}">{{$a->name}}</option>
#endforeach
</select>
The above code result :-
<select id="buildgs" " onchange="showBuildings()">
<option value="A">A</option>
<option value="B">B</option>
</select>
Second: The child select (Buildings):-
<select id="building" >
<option value=""></option>
#foreach ($areas as $a)
#foreach($a->buildings as $b)
<option style="display: none" id="{{$a->name}}" value="{{$b->id}}">
#if($b->symbol)
{{$b->symbol}} ({{$b->name}})
#else
{{$b->name}}
#endif
</option>
#endforeach
#endforeach
</select>
The above code result :-
<select id="building">
<option style="display: none" id="A" value="58">
STFA Land Area Workshop
</option>
<option style="display: none" id="A" value="121">
Temporary offices
</option>
<option style="display: none" id="B" value="60">
TC (Training Center)
</option>
<option style="display: none" id="B" value="110">
STFA Onshore Cabins
</option>
<option style="display: none" id="B" value="111">
STFA Onshore WS
</option>
</select>
Jquery and Javascript code:-
<script>
function showBuildings(){
//getting the value from Parent (Areas)
var x = $("#buildgs").val();
//This one just for testing and it's working
document.getElementById('testt').innerHTML='this changed to '+ x;
//This supposed to change all child <option>.style with x id but it not doing any thing !!!!!
document.getElementById(x).style.display='display';
}
</script>
First of all, The id property must be unique, replace them with class.
Change this line:
<option style="display: none" id="{{$a->name}}" value="{{$b->id}}">
To:
<option style="display: none" class="{{$a->name}}" value="{{$b->id}}">
And change this line:
document.getElementById(x).style.display='display';
To:
var results = document.getElementsByClassName(x);
for(var i = 0; i < results.length; i++) {
results[i].style.display='display';
}
UPDATE
I see that you use jQuery to retrieve the value of the select box, here is a clean method with less code to achieve what you want:
<select id="buildgs" onchange="showBuildings(this.value)">
Your new function:
<script>
function showBuildings(val){
$('#building option').not('.'+val).hide(); // Don't forget this!
$('#building option.' + val).show();
}
</script>
I am currently developing an airline reservation using PHP(Codeigniter). Currently the fields/radio buttons that I have:
2 radio button
1) One way
2) Round Trip
2 dropdown list
1) From
2) To
and so on..
When the user trying to book, the user can't repeat the destination he inputted "from destination" into "to destination". Example: I have 3 destinations; 1) Country 1; 2) Country 2; 3) Country 3, then user tries to book. From: Country 1, To: Country1. The Country 1 in the "To:" should not be display because he already use it in the From Destination.
NOTE: The thing that I do first is, call all the available destinations in my controller then call it in my view using my foreach.
<div class="pure-u-1-1 fromto">
<div class="pure-u-1-1">
<label for="from" class="margin2px">From</label>
<!-- <input type="text" class="fromto"><br> -->
<select class="fromto" name="flight_from">
<?php foreach($flight as $a):?>
<option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
<?php endforeach?>
</select>
</div>
<div class="pure-u-1-1">
<label for="to" class="tomargin">To</label>
<!-- <input type="text" class="fromto"><br> -->
<select class="fromto" name="flight_to">
<?php foreach($flight as $a):?>
<option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
<?php endforeach?>
</select>
</div>
Question: How can I prevent it from repeating the country I selected in my "from destination" into "to destination"?
You may use jQuery:
$('select[name=flight_from]').on('change',function(){
$("select[name=flight_to]").find('option').show();
var from = $(this).find(":selected").val();
$("select[name=flight_to]").val('');
if ( from != "" ) {
$("select[name=flight_to]").find( 'option:contains("'+from+'")' ).hide();
}
})
<select name="flight_from">
<option value="">-- Please select depature --</option>
<option>Country 1</option>
<option>Country 2</option>
<option>Country 3</option>
</select>
<select name="flight_to">
<option value="">-- Please select destination --</option>
<option>Country 1</option>
<option>Country 2</option>
<option>Country 3</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- - Check out this image.
I want that when someone selects any category then the sub category displays choices based on that particular category that was selected. I'm learning PHP/MySQL but I know the basics of Javascript. Can any teach me in a simple way how it can be done with JavaScript or JQuery?
Categories and sub categories are showing perfectly in the dropdown but are showing all the Sub-Categories and Categories.
<div>
<label>Category</label>
<select name="category">
<option value="0" disabled selected>Select Category</option>
<?php
$cdata = $dbobj->getCategories(0);
while($crow = mysql_fetch_array($cdata)){?>
<option value="<?php echo $crow["categoryid"]; ?>"><?php echo $crow["category_name"]; ?></option>
<?php } ?>
</select>
</div>
<div>
<label>Sub Category</label>
<select name="subcategory">
<option value="0" disabled selected>Select Category</option>
<?php
$scdata = $dbobj->getSubCategories(0);
while($scrow = mysql_fetch_array($scdata)){?>
<option value="<?php echo $scrow["subcategoryid"]; ?>"><?php echo $scrow["subcategory_name"]; ?></option>
<?php } ?>
</select>
</div>
Thanks
Categories & Sub Categories
Men
Clothes
Shoes
Women
Jewelry
Sarees
Shoes
Kids
Toys
Clothes
Books
Language
Fiction
What I want is - whenever someone chooses the category Men, only two subcategories, Clothes and Shoes show up.
Using JQuery :
$(function(){
$(".category option").click(function(){
$(".category").parent().css("display", "none"); // Targetting the parent and hide
$(".subcategory").parent().css("display", "block"); // Targetting the parent and show
});
$(":not(.category option)").click(function(){
// If click on other thing than category option then show
$(".category").parent().css("display", "block");
});
});
EDIT : Added the possibility to return to category
When change value my page is refresh because i have to send value to query data
but my selector doesn't show value when selected
<form name='active' action='' method='GET'>
<select class="form-control" id="section" name="section" onchange="list()" >
<option value="0"> - - Select All - - </option>
<?php
$section = $db->fetch();
foreach ($section as $key => $v) {
$section_name = $v['section'];
echo "<option value='".$section_name."'>",$section_name,"</option>";
}
?>
<script type="text/javascript">
function list(){
document.active.submit();
}
</script>
For an option in a dropdown other than the first one to be selected on page load, you have to add the selected="selected" attribute to one of the <option> elements like so :
<select class="form-control" id="section" name="section" onchange="list()" >
<option value="0"> - - Select All - - </option>
<option value="1" selected="selected"> I'm selected </option>
<option value="2"> I'm not selected </option>
</select>
In your case, it implies checking either the GET variable or the database value in your foreach loop to set the attribute accordingly.