{"id":1281,"date":"2019-09-13T22:05:19","date_gmt":"2019-09-13T14:05:19","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1281"},"modified":"2022-02-17T15:16:17","modified_gmt":"2022-02-17T07:16:17","slug":"2020ironman-svelte-select-option","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/13\/2020ironman-svelte-select-option\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY12-\u4e0b\u62c9\u9078\u55ae\u7684\u8a2d\u5b9a"},"content":{"rendered":"

svelte\u8a2d\u5b9a\u4e0b\u62c9\u9078\u55ae<\/h1>\n

\u6628\u5929\u8ddf\u5927\u5bb6\u5206\u4eab\u5b8c html \u7684 input \u7684\u5c6c\u6027\u7d81\u5b9a\uff0c\u4e0d\u904e\u9084\u6709\u578b\u614b\u6bd4\u8f03\u7279\u5225\u7684 select \u8ddf option \u4eca\u5929\u7e7c\u7e8c\u8ddf\u5927\u5bb6\u5206\u4eab\u3002<\/p>\n

<\/p>\n

select\u7684\u683c\u5f0f<\/h1>\n

\u5927\u5bb6\u61c9\u8a72\u5f88\u719f\u6089 html \u4e2d select \u7684\u683c\u5f0f\uff0c\u63a5\u4e0b\u4f86\u8981\u8ddf\u5927\u5bb6\u5206\u4eab\u5728 svelte \u4e2d select \u8ddf option \u8981\u600e\u9ebc\u4f7f\u7528\u3002<\/p>\n

\u57fa\u672c\u7684select<\/h2>\n

\u4ecb\u7d39\u4e4b\u524d\u5148\u8acb\u5927\u5bb6\u770b\u4e00\u4e0b\u4e0b\u5217\u5f0f\u5b50\u3002<\/p>\n

<select bind:value={selected}>\n    <option value={a}>a<\/option>\n    <option value={b}>b<\/option>\n    <option value={c}>c<\/option>\n<\/select><\/code><\/pre>\n
\u57fa\u672c\u4e0a\u8ddfhtml\u7684\u64b0\u5beb\u65b9\u5f0f\u6c92\u6709\u5dee\u5225\uff0c\u76f8\u4fe1\u770b\u904e\u524d\u9762\u5e7e\u7bc7\u7684\u670b\u53cb\u90fd\u77e5\u9053 <\/code> \u5167\u7684\u90fd\u662f\u8b8a\u6578\uff0c\u9019\u6642\u5c31\u628a seleted<\/code> \u8ddf\u9078\u64c7\u7684\u9805\u76ee\u7d81\u5b9a\u518d\u4e00\u8d77\uff0c\u9078\u64c7\u7684\u9805\u76ee\u53ef\u4ee5\u7528 seleted<\/code> \u5448\u73fe\u6216\u662f\u4f7f\u7528\u3002<\/p>\n
\u8907\u9078\u7684select<\/h2>\n
\u5728\u8a8d\u8b58\u57fa\u672c\u7684 select \u5f8c\u5982\u679c\u8981\u505a\u4e00\u500b\u53ef\u4ee5\u8907\u9078\u7684 select \u53ea\u8981\u5728 select \u4e0a\u52a0\u4e0a multiple<\/code> \u95dc\u9375\u5b57\u5373\u53ef\uff0c\u7d50\u679c\u5982\u4e0b\u5f0f\u5b50\u3002<\/p>\n
<select multiple bind:value={fillings}>\n    <option value="Rice">Rice<\/option>\n    <option value="Beans">Beans<\/option>\n    <option value="Cheese">Cheese<\/option>\n    <option value="Guac (extra)">Guac (extra)<\/option>\n<\/select><\/code><\/pre>\n
\u6700\u5f8c\u4e0a\u8ff0\u4f8b\u5b50\u5982\u679c\u7576value\u8207\u5448\u73fe\u7684\u503c\u76f8\u540c\u6642\u53ef\u4ee5\u52a0\u4ee5\u7701\u7565\u5982\u4e0b\u5217\u5f0f\u5b50\u6240\u793a\u3002<\/p>\n
<select multiple bind:value={fillings}>\n    <option>Rice<\/option>\n    <option>Beans<\/option>\n    <option>Cheese<\/option>\n    <option>Guac (extra)<\/option>\n<\/select><\/code><\/pre>\n
\u7d50\u5408\u4e4b\u524d\u6240\u5b78<\/h2>\n
\u5982\u679c\u518d\u642d\u914d\u4e4b\u524d\u6240\u5b78\uff0c\u6211\u5011\u53ef\u4ee5\u5f88\u5feb\u5b8c\u6210\u4e00\u500b\u52d5\u614b\u7684\u4e0b\u62c9\u9078\u55ae\u3002<\/p>\n
<script>\n    let list=['kirai','joe','jay'];\n    let selected='kirai';\n<\/script>\n\n<h1>Hello {selected}!<\/h1>\n<select multiple bind:value={selected} >\n{#each list as item}\n<option>{item}<\/option>\n{\/each}\n<\/select><\/code><\/pre>\n
\u5c0f\u7d50<\/h1>\n
\u4eca\u5929\u8ddf\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b\u5982\u4f55\u5728svelte\u5448\u73fe\u4e0b\u62c9\u9078\u55ae\uff0c\u4ee5\u53ca\u5982\u4f55\u7d81\u5b9a\u8b8a\u6578\uff0c\u5e0c\u671b\u5927\u5bb6\u6703\u559c\u6b61\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
svelte\u8a2d\u5b9a\u4e0b\u62c9\u9078\u55ae \u6628\u5929\u8ddf\u5927\u5bb6\u5206\u4eab\u5b8c html \u7684 input \u7684\u5c6c\u6027\u7d81\u5b9a\uff0c\u4e0d\u904e\u9084\u6709\u578b\u614b\u6bd4\u8f03\u7279\u5225\u7684 se … <\/p>\n
\u95b1\u8b80\u5168\u6587\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY12-\u4e0b\u62c9\u9078\u55ae\u7684\u8a2d\u5b9a\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1281","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1281"}],"version-history":[{"count":7,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1281\/revisions"}],"predecessor-version":[{"id":3012,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1281\/revisions\/3012"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}