Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form role="search" action="http://localhost:5757/alpool/" method="get" class="alp-search-form">
    <input type="hidden" name="alp-search" value="true">
    <div class="ui fluid search dropdown huge selection multiple">
      <select name="cat_s[]" multiple="multiple"> 
        <option value=""> Select Category </option>
        <option value="358">Apple</option>
        <option value="399">Banana</option>
        <option value="359">Water</option>
      </select>
    </div>
    <button type="submit" class="ui primary basic button">검색</button>
</form>
​
<ul>
  <li>
  Note that the <code>form</code> needs this CSS <code>class</code>: <i>alp-search-form</i>.</li>
  <li>In the PHP script/function that processes the form data (or handle the
  search), you can use this snippet (which uses the <a href="https://developer.wordpress.org/reference/functions/wp_parse_id_list/"><code>wp_parse_id_list()</code></a>
  function in WordPress) to grab the selected category IDs:
    <pre><code>// This variable will/should always be an array.
$cat_ids = isset( $_GET['cat_s'] ) ?
  wp_parse_id_list( $_GET['cat_s'] ) : array();</code></pre>
  </li>
</ul>
​
<p>
  Thanks for visiting,<br />
  &mdash; <a href="https://wordpress.stackexchange.com/users/137402/sally-cj">Sally</a>
</p>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</body>
</html>
 
/* These (basic) styles are just for the demo. */
​
pre code {
  white-space: pre-wrap;
}
​
ul, p {
  font-family: sans-serif;
  font-size: 0.8em;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers