{"id":58,"date":"2023-08-25T18:59:10","date_gmt":"2023-08-25T18:59:10","guid":{"rendered":"\/\/jqueryui.com\/?page_id=58"},"modified":"2024-04-26T16:40:32","modified_gmt":"2024-04-26T16:40:32","slug":"selectmenu","status":"publish","type":"page","link":"https:\/\/jqueryui.com\/selectmenu\/","title":{"rendered":"Selectmenu"},"content":{"rendered":"<p class=\"desc\">Duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.<\/p>\n\n<div class=\"demo-list\"><h2>Examples<\/h2><ul><li class=\"active\"><a href=\"\/resources\/demos\/selectmenu\/default.html\">Default functionality<\/a><\/li><li><a href=\"\/resources\/demos\/selectmenu\/custom_render.html\">Custom Rendering<\/a><\/li><li><a href=\"\/resources\/demos\/selectmenu\/product-selection.html\">Product Selection<\/a><\/li><\/ul><\/div><iframe src=\"\/resources\/demos\/selectmenu\/default.html\" class=\"demo-frame\"><\/iframe><div class=\"demo-description\">\n<p>The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization <\/p>\n<p>The datasource is a native select element. Supports optgroups.<\/p>\n<\/div><div class=\"view-source\"><a tabindex=\"0\"><i class=\"icon-eye-open\"><\/i> view source<\/a><div><div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n56\">56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n57\">57<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n58\">58<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n59\">59<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n60\">60<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n61\">61<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n62\">62<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n63\">63<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n64\">64<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n65\">65<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n66\">66<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n67\">67<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n68\">68<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n69\">69<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n70\">70<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n71\">71<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n72\">72<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n73\">73<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n74\">74<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n75\">75<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n76\">76<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n77\">77<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n78\">78<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n79\">79<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n80\">80<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n81\">81<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n82\">82<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n83\">83<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n84\">84<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n85\">85<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n86\">86<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n87\">87<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n88\">88<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n89\">89<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n90\">90<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n91\">91<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n92\">92<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n93\">93<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n94\">94<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n95\">95<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n96\">96<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n97\">97<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n98\">98<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n99\">99<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n100\">100<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n101\">101<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n102\">102<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n103\">103<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n104\">104<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n105\">105<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery UI Selectmenu - Default functionality<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/themes\/base\/jquery-ui.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/resources\/demos\/style.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-selector-tag\">fieldset<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">0<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-selector-tag\">label<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attribute\">display<\/span>: block;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-selector-class\">.overflow<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">200px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.7.1.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/jquery-ui.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#speed\"<\/span> ).selectmenu();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#files\"<\/span> ).selectmenu();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#number\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      .selectmenu()<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      .selectmenu( <span class=\"hljs-string\">\"menuWidget\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .addClass( <span class=\"hljs-string\">\"overflow\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#salutation\"<\/span> ).selectmenu();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"demo\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">fieldset<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"speed\"<\/span>&gt;<\/span>Select a speed<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"speed\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"speed\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Slower<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Slow<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">selected<\/span>=<span class=\"hljs-string\">\"selected\"<\/span>&gt;<\/span>Medium<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Fast<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Faster<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"files\"<\/span>&gt;<\/span>Select a file<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"files\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"files\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">optgroup<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Scripts\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"jquery\"<\/span>&gt;<\/span>jQuery.js<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"jqueryui\"<\/span>&gt;<\/span>ui.jQuery.js<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">optgroup<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">optgroup<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Other files\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"somefile\"<\/span>&gt;<\/span>Some unknown file<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"someotherfile\"<\/span>&gt;<\/span>Some other file with a very long option text<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">optgroup<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"number\"<\/span>&gt;<\/span>Select a number<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"number\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"number\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">selected<\/span>=<span class=\"hljs-string\">\"selected\"<\/span>&gt;<\/span>2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>5<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>6<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>7<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>8<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>9<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>10<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>11<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>12<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>13<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>14<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>15<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>16<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>17<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>18<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>19<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"salutation\"<\/span>&gt;<\/span>Select a title<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"salutation\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"salutation\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">disabled<\/span>=<span class=\"hljs-string\">\"\"<\/span> <span class=\"hljs-attr\">selected<\/span>=<span class=\"hljs-string\">\"\"<\/span>&gt;<\/span>Please pick one<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Mr.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Mrs.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Dr.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Prof.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span>&gt;<\/span>Other<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">fieldset<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n<\/div><\/div>\n\n<p>Want to learn more about the selectmenu widget? Check out the\n<a href=\"https:\/\/api.jqueryui.com\/selectmenu\/\">API documentation<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control. ExamplesDefault functionalityCustom RenderingProduct Selection The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization The datasource is &hellip; <a href=\"https:\/\/jqueryui.com\/selectmenu\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58","page","type-page","status-publish","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":2,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/58\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/58\/revisions\/341"}],"wp:attachment":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}