{"id":918,"date":"2016-02-15T19:10:07","date_gmt":"2016-02-15T19:10:07","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=918"},"modified":"2023-10-11T10:06:31","modified_gmt":"2023-10-11T10:06:31","slug":"six-demos-of-how-to-get-value-in-jquery-select-option","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/","title":{"rendered":"Six demos of how to get value in jQuery select option"},"content":{"rendered":"

The HTML select dropdown and jQuery <\/strong><\/h3>\n

In certain scenarios, you need to work with forms in web projects and get value selected by the user, particularly in the select dropdown to perform a certain action without refreshing the web page.<\/p>\n

In this tutorial, I will show you examples of using HTML select to get the selected value and performing some actions by using jQuery. The examples can be seen online by clicking the image or link with each example.<\/p>\n

How to get the selected value from the dropdown using jQuery code<\/strong><\/h3>\n

By using the $.val method<\/em> of jQuery, you may get the value of any input form controls <\/em><\/strong>including HTML select<\/em>. In the case of a select dropdown, the returned value is the selected option \u201cvalue\u201d, not its text.<\/p>\n

See a demo below, where I created a select dropdown. Choose a color from the dropdown and it will trigger an alert, showing the selected color\u2019s value.<\/p>\n

\"jQuery<\/p>\n

Code:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"\/\/code.jquery.com\/jquery-1.12.0.min.js\"><\/script>  \r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n \r\n$(\"#jqueryselect\").change(function(){\r\n var selectedcolor = $('#jqueryselect').val(); \r\n    alert (selectedcolor); \r\n});\r\n \r\n});\r\n<\/script>\r\n\r\n<style>\r\n.jquerysel {\r\n  background: #2C5656;\r\n  height: 75px;\r\n  width:250px;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:22px;\r\n  color:#fff;  \r\n}\r\n<\/style>\r\n \r\n<\/head>\r\n \r\n<body>\r\n<div class=\"jquerysel\">\r\n<label>Select A Color: <\/label><select id=\"jqueryselect\">\r\n    <option value=\"MAR\">Maroon<\/option>\r\n    <option value=\"GRE\">Green<\/option>\r\n    <option value=\"YEL\">Yellow<\/option>\r\n    <option value=\"BLU\">Blue<\/option>\r\n    <option value=\"RED\">Red<\/option>\r\n\r\n<\/select>\r\n<\/div> \r\n\r\n<\/body>\r\n \r\n<\/html>\r\n\r\n<\/pre>\n
As you select a color from the dropdown, the change event occurs in the dropdown. The following code is placed as this event occurs where $.val<\/strong> method is used to get the value of the selected option dropdown:<\/p>\n
<script type=\"text\/javascript\">\r\n\r\n$(document).ready(function(){\r\n\r\n\r\n\r\n$(\"#jqueryselect\").change(function(){\r\n\r\nvar selectedcolor = $('#jqueryselect').val();\r\n\r\nalert (selectedcolor);\r\n\r\n});\r\n\r\n\r\n\r\n});\r\n\r\n<\/script><\/pre>\n
The selected option’s value is displayed in a simple alert. You can see, the alert shows the value behind each visible text, not the text itself.<\/p>\n
An example to get the text of selected option<\/strong><\/h3>\n
If you want to get the text not the value of the selected option in jQuery, you can use the $.text method<\/em>. However, simply using the $.text<\/em> will return the whole text of the select dropdown. You have to use the selected attribute<\/strong> to get the text of selected option.<\/p>\n
For example, if you use this in the above example:<\/p>\n
\n
var selectedcolor = $('#jqueryselect').text();<\/pre>\n
 <\/p><\/blockquote>\n
The output will be:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
You see, an option is selected and it displays all color names (select tag text of all options) in the alert.<\/p>\n
To get only the selected option\u2019s text, you may use this in the above example:<\/p>\n
\n
var selectedcolor = $('#jqueryselect option:selected').text();<\/pre>\n
 <\/p><\/blockquote>\n
For example:<\/p>\n
\"jQuery<\/p>\n
The alert shows the text of the selected option only. Note that the value for the \u201cYellow\u201d text is Yel<\/em> which is set in the <select> tag:<\/p>\n
<select id=\"jqueryselect\">\r\n\r\n<option value=\"MAR\">Maroon<\/option>\r\n\r\n<option value=\"GRE\">Green<\/option>\r\n\r\n<option value=\"YEL\">Yellow<\/option>\r\n\r\n<option value=\"BLU\">Blue<\/option>\r\n\r\n<option value=\"RED\">Red<\/option>\r\n\r\n<\/select><\/pre>\n
Changing the CSS upon selecting a color demo<\/strong><\/h3>\n
In this example to explain how you may get the value of select by using jQuery, as you select a color from the dropdown, this will be applied as the background color of the body.<\/p>\n
See the demo first which is followed by a little explanation:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
At the select change event of the dropdown, the following jQuery code is executed:<\/p>\n
$(\"#jqueryselect\").change(function(){\r\n\r\nvar selectedcolor = $('#jqueryselect').val();\r\n\r\n$(\"body\").css(\"background-color\",selectedcolor);\r\n\r\n});<\/pre>\n
Where a variable is assigned the selected value from the dropdown and next line uses the $.css method where body selector is used and the background color is changed to the one selected in the dropdown.<\/p>\n
Similarly, you can use a div, paragraph, span, lists or other elements in place of body selector to perform a\u00a0similar or different action.<\/p>\n
An example of getting selected value and performing an action in HTML table<\/strong><\/h3>\n
In this example, I have created an HTML table with a CSS class as the demo page loads. You can see a dropdown with different options to select a theme for the table.<\/p>\n
As you select a theme, it will be applied to that table. Check online first and then I will explain what is done underneath:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
Again, at the change event of the dropdown, the value of the selected option is assigned to a variable. This variable\u2019s value is used in the $.addClass method<\/a> of jQuery. Before that, the removeClass method deleted the existing class in HTML table which is followed by executing the addClass method to apply selected class.<\/p>\n
Full code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n\r\n<style>\r\n\/*Table theme 1*\/\r\n.demotbl {\r\n    border-collapse: collapse;\r\n    border: 1px solid #69899F;\r\n  }\r\n.demotbl th{\r\n    border: 2px solid #69899F;\r\n    color: #fff;\r\n    padding:10px;\r\n    background-color:#4F6677;\r\n  }\r\n.demotbl td{\r\n    border: 1px dotted black;\r\n    color: #002F5E;\r\n    padding:15px;\r\n    width:100px;\r\n    background-color:#D6DEE4;\r\n  }\r\n  \r\n\/* Class two*\/\r\n.demotbl2 {\r\n    border: 0px solid #69899F;\r\n  }\r\n.demotbl2 th{\r\n    padding:15px;\r\n    color:#fff;\r\n    text-shadow:1px 1px 1px #568F23;\r\n    border-bottom:3px solid #9ED929;\r\n    background-color:#9DD929;\r\n    background:-webkit-gradient(\r\n        linear,\r\n        left bottom,\r\n        left top,\r\n        color-stop(0.02, rgb(123,192,67)),\r\n        color-stop(0.51, rgb(139,198,66)),\r\n        color-stop(0.87, rgb(158,217,41))\r\n        );\r\n    background: -moz-linear-gradient(\r\n        center bottom,\r\n        rgb(123,192,67) 3%,\r\n        rgb(139,198,66) 52%,\r\n        rgb(158,217,41) 88%\r\n        );\r\n    -webkit-border-top-left-radius:5px;\r\n    -webkit-border-top-right-radius:5px;\r\n    -moz-border-radius:5px 5px 0px 0px;\r\n    border-top-left-radius:5px;\r\n    border-top-right-radius:5px;\r\n  }\r\n.demotbl2 td{\r\n    width:100px;\r\n    padding:10px;\r\n    text-align:center;\r\n    vertical-align: top;\r\n    background-color:#DEF3CA;\r\n    border: 1px solid #BED3AB;\r\n    -moz-border-radius:2px;\r\n    -webkit-border-radius:2px;\r\n    border-radius:2px;\r\n    color:#666;\r\n    text-shadow:1px 1px 1px #fff;\r\n\r\n  }  \r\n\r\n.demotbl3 {\r\n    border-collapse: collapse;\r\n    border: 1px solid #A40000;\r\n  }\r\n.demotbl3 th{\r\n    border: 1px solid #A40000;\r\n    color: #fff;\r\n    padding:10px;\r\n    background-color:#FF2F2F;\r\n  }\r\n.demotbl3 td{\r\n    border: 1px dotted black;\r\n    color: #002F5E;\r\n    padding:15px;\r\n    width:100px;\r\n    background-color:#FFE1E1;\r\n  }\r\n\r\n.divcls {\r\n  background: #8B8B8B;\r\n  width:350px;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:22px;\r\n  color:#fff;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"divcls\">\r\n<label>Select Table Theme: <\/label><select id=\"selecttheme\">\r\n    <option value=\"demotbl\">Table Theme 1<\/option>\r\n    <option value=\"demotbl2\">Table Theme 2<\/option>\r\n    <option value=\"demotbl3\">Table Theme 3<\/option>\r\n    <option value=\"demotbl\">Default Theme<\/option>\r\n    \r\n<\/select>\r\n<\/div>\r\n<p>\r\n<table class=\"demotbl\" id=\"tbl\">\r\n  <tr>\r\n      <th>Product ID<\/th>\r\n      <th>Product Name<\/th>\r\n      <th>Product Quality<\/th>\r\n      <th>Product Quantity<\/th>\r\n  <\/tr>\r\n  <tr>\r\n      <td>1<\/td>\r\n      <td>Wheat<\/td>\r\n      <td>Good<\/td>\r\n      <td>200 Bags<\/td>\r\n  <\/tr>\r\n  <tr>\r\n      <td>2<\/td>\r\n      <td>Rice<\/td>\r\n      <td>Good<\/td>\r\n      <td>250 Bags<\/td>\r\n  <tr>\r\n      <td>3<\/td>\r\n      <td>Sugar<\/td>\r\n      <td>Good<\/td>\r\n      <td>200 Bags<\/td>\r\n  <\/tr>  \r\n<\/table>\r\n<\/p>\r\n\r\n<script>\r\n\r\n  $(\"#selecttheme\").change(function(){\r\n   var themetbl = $('#selecttheme').val();\r\n    $(\"#tbl\").removeClass( ).addClass( themetbl );\r\n \r\n});\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
This jQuery code is used, which is placed just above the <\/body> tag:<\/p>\n
$(\"#selecttheme\").change(function(){\r\n\r\nvar themetbl = $('#selecttheme').val();\r\n\r\n$(\"#tbl\").removeClass( ).addClass( themetbl );\r\n\r\n\r\n\r\n});<\/pre>\n
The table \u201cthemes\u201d CSS is created and placed inside the <style> tag. You can see the complete code including markup and CSS at the demo page.<\/p>\n
An example of getting selected value and using $.get method<\/strong><\/h3>\n
Not only you may perform simple CSS changes by using jQuery methods as shown in the above examples, you can also use the selected value to perform some AJAX-based operations as well.<\/p>\n
In this example, the HTML dropdown is populated with a few products for demo purposes. After selecting a product, as you click the button \u201cLoad Product Data\u201d, the selected value is assigned to a variable and used in the jQuery $.get method.<\/p>\n
The selected product is searched in the MySQL database\u2019s table by establishing a connection and creating an SQL query and finally, the result is displayed in an HTML table.<\/p>\n
See the demo online by clicking the link or image below:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
See the following code in the <script> section:<\/p>\n
$(\"#getbtn\").click(function(){\r\n\r\nvar prodname = $('#selproduct :selected').text();\r\n\r\n$.get(\"getsingleprod.php\", { ProductName: prodname },function(getresult){\r\n\r\n$(\"#presentprod\").html(getresult);\r\n\r\n});\r\n\r\n});<\/pre>\n
You see, the selected option is assigned to a variable by using the $.text method. After that, the $.get method is used to call a PHP file along with sending a ProductName<\/em> parameter.<\/p>\n
The PHP file establishes the connection with a database and created an SQL query on the basis of the selected product and retrieves the product information from MySQL table.<\/p>\n
Finally, an HTML table is created inside that PHP file that is returned to $.get\u2019s getresult<\/em> parameter. The final line in jQuery code is used to display that returned data to the \u201chtml\u201d selector.<\/p>\n
Similarly, you can use the $.post and $.ajax methods of jQuery to perform this kind of operations without refreshing the webpage.<\/p>\n","protected":false},"excerpt":{"rendered":"
The HTML select dropdown and jQuery In certain scenarios, you need to work with forms in web projects and get value selected by the user, particularly in the select dropdown to perform a certain action without refreshing the web page. In this tutorial, I will show you examples of using HTML select to get the … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":919,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[48],"yoast_head":"\nSix demos of how to get value in jQuery select option<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Six demos of how to get value in jQuery select option\" \/>\n<meta property=\"og:description\" content=\"The HTML select dropdown and jQuery In certain scenarios, you need to work with forms in web projects and get value selected by the user, particularly in the select dropdown to perform a certain action without refreshing the web page. In this tutorial, I will show you examples of using HTML select to get the ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-15T19:10:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T10:06:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/02\/27.0_1-jQuery-select-option.png\" \/>\n\t<meta property=\"og:image:width\" content=\"460\" \/>\n\t<meta property=\"og:image:height\" content=\"320\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/\",\"url\":\"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/\",\"name\":\"Six demos of how to get value in jQuery select option\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-02-15T19:10:07+00:00\",\"dateModified\":\"2023-10-11T10:06:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Six demos of how to get value in jQuery select option\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Six demos of how to get value in jQuery select option","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/","og_locale":"en_US","og_type":"article","og_title":"Six demos of how to get value in jQuery select option","og_description":"The HTML select dropdown and jQuery In certain scenarios, you need to work with forms in web projects and get value selected by the user, particularly in the select dropdown to perform a certain action without refreshing the web page. In this tutorial, I will show you examples of using HTML select to get the ... Read more","og_url":"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/","article_published_time":"2016-02-15T19:10:07+00:00","article_modified_time":"2023-10-11T10:06:31+00:00","og_image":[{"width":460,"height":320,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/02\/27.0_1-jQuery-select-option.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/","url":"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/","name":"Six demos of how to get value in jQuery select option","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-02-15T19:10:07+00:00","dateModified":"2023-10-11T10:06:31+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/six-demos-of-how-to-get-value-in-jquery-select-option\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Six demos of how to get value in jQuery select option"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/918"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=918"}],"version-history":[{"count":8,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/918\/revisions"}],"predecessor-version":[{"id":10677,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/918\/revisions\/10677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}