Anchor jump to without refreshing page - javascript

Is there a better way to create an anchor dropdown jump to bookmark. the one I have now is not consistent.
<style>
select {
width: 500px;
float: right;
}
.hero-unit {
margin-bottom: 10px !important;
}
</style>
<script>
var dropDownValue = document.getElementById("dropDown");
dropDownValue.onchange = function() {
if (this.selectedIndex !== 0) {
window.location.href = this.value;
}
};
</script>
<select name="dropDown" id="dropDown">
<?php foreach ($category->getChildrenCategories() as $categoryGroup) : ?>
<?php foreach ($categoryGroup->getChildrenCategories() as $topic) : ?>
<option value="#<?php echo $topic->getId(); ?>"><?php echo $topic->getName(); ?></option>
<?php endforeach; ?>
<?php endforeach; ?>
</select>

Related

PHP Select from drop-down

I can't select the top option from the drop-down only the options under the top.
<form>
<select name="car_license" class="form-control" id="car_license" onchange="change()">
<?php for ($i = 0; $i < $size; $i++) { ?>
<option value="<? echo $data[$i]['license'] ?>"><? echo $data[$i]['license'] ?></option>
<? } ?>
</select>
</form>
<script>
function change(){
document.getElementById("myform").submit();
}
</script>
$license = $_POST['car_license'];
Your code seem not complete but will suggest you try this.
<form method="post">
<select name="car_license" class="form-control" id="car_license"
onchange="change()">
<?php for ($i = 0; $i < $size; $i++) {
?>
<option value="<? echo $data[$i]['license'] ?>"><? echo $data[$i]
['license'] ?></option>
<? } ?>
</select>
</form>
<script>
function change(){
//use ajax to submit using "post" method
}
</script>

On mobile select2 search hide when mobile keypad open

On Browser site work well.. but,when i open it on mobile problem i face like bellow image.
after scroll page down i see search box like this..
Any one help me solved this problem code is here.
<td colspan="2">
<select name="sel_specialities" id="sel_specialities" data-placeholder="--<?php echo $this->lang->line('select'); ?>--" class="select" >
<option value=""></option>
<?php
foreach ($specList as $spec) {
?>
<option value="<?php echo $spec['SPEC_ID']; ?>" <?php echo $this->session->userdata('sel_specialities') == $spec['SPEC_ID'] ? 'selected="selected"' : ''; ?> ><?php echo $spec['SPEC_NAME']; ?></option>
<?php
}
?>
</select>
Script
$(function () {
$(".select").select2();
});
Add in your css
body .select2-container.select2-container--default.select2-container--open {
top: 305px!important;
left: 22px!important;
}
.select2.select2-container.select2-container--default.select2-container--below.select2-container--open {
top: auto!important;
}

Getting select list id and value in jquery from array of select lists

I have a HTML structure like following:
<?php foreach($active_brand as $brand) { ?>
<select name="selector" id="selector">
<?php foreach($options as $option) { ?>
<option <?php if($brand['State'] == $option) { ?>selected="selected"<?php } ?> value="<?=$brand['id']?>"><?php echo $option; ?></option>
<?php } ?>
</select>
<?php } ?>
This basically gives me lets say 10 select lists... Now I need to fetch the each value from the selected item in select list...
I have tried the following:
$('#selector').text();
$('#selector').change(function() {
alert($(this).val());
});
But whenever I select anything from any of the select lists, nothing happens... Can someone help me out ?
Add class to select list;
<?php foreach($active_brand as $brand) { ?>
<select class="my-select" name="selector" id="selector">
<?php foreach($options as $option) { ?>
<option <?php if($brand['State'] == $option) { ?>selected="selected"<?php } ?> value="<?=$brand['id']?>"><?php echo $option; ?></option>
<?php } ?>
</select>
<?php } ?>
Create change event from class name:
$('.my-select').change(function() {
alert($(this).val());
alert($(this).find("option:selected").text()); // to get text of selected option
});

How to assign value returned by a function into a variable?

I need to determine the sceen width using media query then properly display the results retreived from database. For now results are shown using a function this way. This function actually to display dropdown list for a particular menu.
<?php Core::getHook('block-branches'); ?>
So tried something as below to display content according to screen width:
<?php
if (isset($_GET['width'])) {
$width = $_GET['width'];
if ($width <= 480) { //mobile devices
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} elseif ($width <= 720){ //tablets
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} else { //desktops
$list = Core::getHook('block-branches'); **//assigning function value into a variable**
}
}
?>
HTML
<select id="myselect">
<option>Go To ...</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/">Home</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us ▾</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</option>
<option>Branches ▾
<?php echo $list;?>**(display according to screen width)**
</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</option>
</select>
<script>
//$('#myselect').on('change', function() {
//location.href=$(this).data('url');
//});
document.getElementById("myselect").onchange = function(d){
window.location = this.value;
};
</script>
I think the function getHook('block-branches') is returning an array not a value so you must loop the $list and display the value like this
<option>Branches ▾
<?php foreach($list as $value){
echo $value;
}?>**(display according to screen width)**
</option>

Show div base on onchange from dropdown option, help

I try to show some information inside of <div> as following:
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
by choose from drop down option e.g.
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
and the full code as following,
<tr>
<td>Book Option</td>
<td>
<select name="books">
<?php foreach ($others as $other) { ?>
<?php if ($other == $other['other']) { ?>
<option value="<?php echo $other['other']; ?>" selected="selected"><?php echo $other['title']; ?></option>
<?php } else { ?>
<option value="<?php echo $other['other']; ?>"><?php echo $other['title']; ?></option>
<?php } ?>
<?php } ?>
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
</select></td>
</tr>
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
Is there some way to fix this?
<script type="text/javascript">
function showDiv()
{
// hide any showing
$(".details_div").each(function(){
$(this).css('display','none');
});
// our target
var target = "#details_" + $("#test_select").val();
// does it exist?
if( $(target).length > 0 )
{
// show it
$(target).css('display','block');
}
}
$(document).ready(function(){
// bind it
$("#test_select").change(function(){
showDiv();
});
// run it automagically
showDiv();
});
</script>
<style>
.details_div
{
display:none;
}
</style>
{/literal}
<select id="test_select">
<option value="">- Select - </option>
<option value="book" selected="selected">Books</option>
<option value="movie">Movie</option>
</select>
<div id="details_book" class="details_div">BOOK DETAILS</div>
<div id="details_movie" class="details_div">MOVIE DETAILS</div>
It looks like you're using jquery so I would first suggest to remove all javascript from the html / php and put it in a separate section or file.
You can then simply do stuff like:
$("#art_indicator").change(function() {
// do what you want to do
});
Also, the html for #show_details seems to be wrong:
style="'display:block;' : 'display:none;'"
is no valid style declaration.
I don't think <option> registers the onchange event. What you want instead is to use its parent <select onchange=''> to define the change event.
<script type='text/javascript'>
function selOnChange() {
if ($('#selectList').value == "art" {
$("#show_details").css('display', 'block');
} else {
$("#show_details").css('display', 'none');
}
}
Now you need to have a default "unselected" option. I have it here with value="-1"
When the select list changes, if its value is the value of #art_indicator, the div will be shown. otherwise, the div will not be shown.
<select id='selectList' name="books" onchange="selOnChange()">
<option value="-1">Select something</option>
<option id="#art_indicator" value="art">Art choice...</option>
<?php // list all your other options ?>
</select>

Categories