Databases
StackOverflow2013
Postsdbo
POWhat's the best approach for a dynamic value-range select form?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat's the best approach for a dynamic value-range select form?
    primarykey
    data
    text
    <p>I have created a real estate search function where in the user will input the price range. I have put two select fields to minimize user error, one for the minimum price and the other for maximum price. I want to utilize a dynamic form to further minimize entry error.</p> <p>For example, the minimum price select has the following values:</p> <ul> <li>$100k (default)</li> <li>$200k</li> <li>$300k</li> <li>$400k</li> <li>$500k</li> <li>$600k</li> <li>$700k</li> <li>$800k</li> <li>$900k</li> <li>$1M</li> </ul> <p>While the maximum price select has the same as above but without $100k and with additional $2M+, with a default value of $200k.</p> <p>What I want to happen is to have a function that will not only validate the entry on-page but also dynamically change the select options for the maximum price. So when the user selects a minimum price, the maximum price field options will not display the selected minimum price and below.</p> <p>So at the start, if the user selects $500k minimum, the maximum automatically changes to $600k while removing from the options anything below it.</p> <p>What's the best approach for this?</p> <p>Thanks in advance!</p> <hr> <p>Update: I followed Jake's answer and I can't make it work.</p> <p>Here's the code of the form and script:</p> <pre><code>&lt;form name="search" action="/search/" method="get"&gt; &lt;label&gt;Price Range: &lt;/label&gt; Between: &lt;select name="min_price"&gt; &lt;option value="1"&gt;1M&lt;/option&gt; &lt;option value="2"&gt;2M&lt;/option&gt; ... &lt;option value="15"&gt;15M&lt;/option&gt; &lt;option value="20"&gt;20M&lt;/option&gt; &lt;/select&gt; and &lt;select name="max_price"&gt; &lt;option value="2"&gt;2M&lt;/option&gt; &lt;option value="3"&gt;3M&lt;/option&gt; ... &lt;option value="30"&gt;30M+&lt;/option&gt; &lt;/select&gt; ... &lt;/form&gt; &lt;script type="text/javascript"&gt; $("#min_price").change(function(){ var min = $(this).val(); $("#max_price").find("option").each(function(){ if (this.value &lt;= min) { $(this).hide(); } else { $(this).show(); } }); }); &lt;/script&gt; </code></pre> <p>I'm using wordpress and it has jQuery 1.4.4. How can I make it work? Is there an error on my html code?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USOndrej Slinták
    1. USiamebet
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COadd the id attributtes to id="min_price" and id="max_price" to the <select> elements
      singulars
      1. POWhat's the best approach for a dynamic value-range select form?
      1. USJake McGraw
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload