I am working on a real estate website and require dropdown fields for minimum bedrooms, bathroom etcs using a simple html code:
<select class="facetwp-dropdown" id="id_beds_min" name="beds_min">
<option disabled selected value>Beds</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
</select>
I know that the fields need conditions - ie that it cannot be less than 1, or 2 etc. But not quite sure on the coding.
I'm using a plugin called FacetWP to assist with the search fields.
Any assistance?
I would completely remove the options you want to disable:
Within the html code (in this code where <option value="1">1+</option> is), call a function in brackets: {this.renderNumberOfBedOptions(minNumberOfBedOptions, maxNumberOfBedOptions)}
Then, above the html code inside the javascript code:
renderNumberOfBedOptions{minNumberOfBedOptions, maxNumberOfBedOptions) {
let options;
for (let i = minNumberOfBedOptions; i < maxNumberOfBedOptions; i++) {
options += <option value=i>i+</option>
}
return options;
Your html should be somthing like this:
<select class="facetwp-dropdown" id="id_beds_min" name="beds_min">
<option disabled selected value>Beds</option>
<?php
for($i=$minbeds; $i<=maxbeds; $i++)
{
echo "<option value=".$i.">".$i."+</option>";
}
?>
</select>
What you do next in the server side is query with something like this:
$bedrooms_min = $_POST["beds_min"];
query = "select* from houses where bedrooms >=".$bedrooms_min
and consider using mysqli prepared statements.
if your html template contains no php code you can convert the loop to JavaScript after querying the minimum and maximum number of rooms from the back end but WordPress templates can contain php code anyway.
Related
I haven't been able to find anything specific to this case. Im trying to change the displayed html object based on the selection from a drop down menu.
So far I have:
<div class="card-body"></div>
<object id="dategraph" data="assets/img/date_manual_interventions_prefix.html"></object>
<select id="DateGraphList">
<option value="assets/img/date_manual_interventions_prefix.html">
Date Graph - Manual Interventions per 1000Mb - SL
</option>
<option value="assets/img/date_manual_interventions_prefix_v.html">
Date Graph - Manual Interventions per 1000Mb - DL
</option>
<option value="assets/img/date_manual_interventions_prefix_full.html">
Date Graph - Manual Interventions per 1000Mb - FN
</option>
</select>
With the js script for this being:
function setCar() {
var obj = document.getElementById("dategraph");
obj.data = this.value;
return false;
}
document.getElementById("DateGraphList").onchange = setCar;
Could some one point out where i'm going wrong?
Thanks in advance!
Try setting the data attribute of the <object> by using Element.setAttribute.
data
The address of the resource as a valid URL. At least one of data and type must be defined.
Note: Don't forget to set the content type as stated above.
<object
id="dategraph"
type="text/html"
data="assets/img/date_manual_interventions_prefix.html">
</object>
function setCar(e) {
const obj = document.querySelector('#dategraph');
obj.setAttribute('data', e.target.value);
}
document.querySelector('#DateGraphList').addEventListener('change', setCar);
I'm planning to add multiple select field into my project but the problem is I want to capture one more integer value along with every selected value,Can anyone suggest me best way of selecting the value along with multiple select. My multiple select dropdown look like this.. and thanks in advance
<div class=" multiselectdd "><multiselect ng-model="vm.inventory.SiteId" options="site.value as site.label for site in vm.sites" data-header-key="header"data-divider-key="divider" scroll-after-rows="5"filter-after-rows="0">
</div>
I don't get it properly but if you want to select more than one object in your select list you can:
Javascript Side
$scope.SelectedChanged = function (yourModel) {
if (yourModel.length > 1) {
$scope.newModel = yourModel[1];
}
};
HTML Side
<select name="yourElementName" multiple ng-model="yourModel" ng-change="SelectedChanged(yourModel)">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Tree</option>
<option value="3">Four</option>
</select>
and call your model to test
<span>{{yourModel}} - Second Value: {{newModel}} </span>
When you select multiple element lets say " One and Two " you will see like:
Output
["0","1"] - Second Value: 1
I wanted to added javascript variable inside html code.
Here is my code:
<select id="currentrun" name="currentrun" >
<option value=""><script>selectedrun</script></option>
</select>
and my js function
var currentrun="";
var selectedrun="";
function setCurrentRun()
{
currentrun = document.getElementById("runlist");
selectedrun = currentrun.options[currentrun.selectedIndex].value;
}
But this doesn't work.
Can anyone help me to do this.
Thanks in advance.
You don't have to run the script like that.
The value of the currentrun can be retrieved as:
document.getElementById('currentrun').value
And for completeness, if you want to trigger a JavaScript function call each time the selection is modified, do this:
<select onchange="my_function();">
<option>...</option>
</select>
It seems like you are trying to set the text of the option element with javascript. Here is one way you can do it using the id of the element to get it and then set the text property of the element to your javascript variable:
<select id="currentrun" name="currentrun" >
<option id="currentoption" value=""></option>
</select>
<script>
document.getElementById("currentoption").text = selectedrun;
</script>
Be sure to put any necessary javascript that declares and sets the selectedrun variable before the above script.
I have a main category select on my form:
<select name ="main_category">
<option value = "maincat1">Main Cat 1</option>
<option value = "maincat2">Main Cat 2</option>
</select>
Dependent on the option value that is selected here I would like to make other selects visible/invisible.
I think hard coding an array will be the simplest solution for deciding which selects I want shown based on the option from the main_category select.
So:
maincat1_array = 'select1, select2, select3'
maincat2_array = 'select2, select4'
In this case if maincat1 is selected in the main dropdown I would expect to see:
<select1 display=""></select>
<select2 display=""></select>
<select3 display=""></select>
<select4 display="none"></select>
And if maincat2 is selected in the main dropdown I would expect to see:
<select1 display="none"></select>
<select2 display=""></select>
<select3 display="none"></select>
<select4 display=""></select>
I am aware that there will need to be some Javascript or JQuery involved, but am a total beginner. I know exactly what I want to do, but cannot work out the best way of doing it.
I would say do it like this:
First, give all the selects (except #main_category) a class so they can be referenced together.
var rules = {
maincat1: ['select1','select2','select3'],
maincat2: ['select2','select4']
}
$('#main_category').change(function(){
var target = $(this).val();
//hide all selects first
$('.select-class').hide();
//loop through the tags in your predefined rules, and show those elements
$.each(rules[target], function(index, value) {
$(value).show();
});
});
In my opinion as a developer, you shoud use a request to a different page for load your options. I don't know if you are using a server-side scriptin, but I'd do like this:
extra_page.scriptextension
<select name="secondSelect">
if option1 then
<select1 display=""></select>
<select2 display=""></select>
<select3 display=""></select>
<select4 display="none"></select>
else
<select1 display="none"></select>
<select2 display=""></select>
<select3 display="none"></select>
<select4 display=""></select>
end
<select>
end of extra_page.scriptextension
then in you main page you put something like that:
<select name ="main_category" id="mainCat">
<option value = "maincat1">Main Cat 1</option>
<option value = "maincat2">Main Cat 2</option>
</select>
<script>
$("mainCat").onchange(function(){
$(this).load("extra_page.scriptextension")
});
</script>
In the extra page you can control a litte better how to populate second select, with options and categories you may have in you database.
It's just the draft of the idea... Of course you should use proper jQuery and javascript syntax, as well as the server side script you use.
I used $.get and received data like
'<option value=\"US-ID\" >Idaho<\/option>\n <option value=\"US-IL\" >Illinois<\/option>\n <option value=\"US-IN\" >Indiana<\/option>\n <option value=\"US-KS\" >Kansas<\/option>\n'
I want to use $(...).html(html_data) how do I make the data I get into html data that I can use?
what I'm getting when $(...).html(data)
http://jsfiddle.net/9WeUv/
Don't know if this matters, but console.log(data):
'...data...'
whereas console.log('regular_string'):
regular_string // no quotes
What's wrong with:
var html_data = '<option value=\"US-ID\" >Idaho<\/option>\n <option value=\"US-IL\" >Illinois<\/option>\n <option value=\"US-IN\" >Indiana<\/option>\n <option value=\"US-KS\" >Kansas<\/option>\n';
$('#select_element_id').html(html_data);
http://jsfiddle.net/45CYX/
After your edit:
Sorry, isn't the string you've received the one you wrote on top? In your jsFiddle you do not have any JS code, just some text in a select tag - which is not what you are saying in the question.
Assuming you grabbed the html from an ajax call and want to add it to the body.
$newSelect = $("<select></select>").html(html_data);
$(document.body).append($newSelect);
http://api.jquery.com/jQuery/#jQuery2 - Creates DOM elements on the fly from the provided string of raw HTML.