blocks|key|2361771|text|像这样的东西可能就是你要找的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2361772|​|2361773|function+updateColors(product)+{
++document.getElementById("color").innerHTML+=+{
++++"jean":++++`<option+value="black">Black</option>
++++++++++++++++<option+value="blue">Blue</option>`,
++++"t-shirt":+`<option+value="yellow">Yellow</option>
++++++++++++++++<option+value="green">Green</option>`
++}[product];
}

window.onload+=+()=>{updateColors("jean");}|code-block|syntax|javascript|2361774|<form+method="post"+action="result.php">
<select+onchange="updateColors(this.value)">
++++<option+value="jean"+selected>jean</option>
++++<option+value="t-shirt">t-shirt</option>
</select>

<select+id="color"></select>
<button+type="submit">See+products</button>
</form>|2361775|2361776|2361777|函数updateColors接受一个值product，它是第一个选择框的值。它使用它来选择要显示的颜色；然后更新该框的HTML。|unordered-list-item|offset|length|style|CODE|2361778|我们使用第一个选择框的onchange事件调用updateColors。每当用户选择一个项目时，就会触发此事件；这样，更改就会立即发生。在这个上下文中，this指的是第一个选择框，value指的是选定的value标记的<option>属性。|2361779|我给了第二个选择框一个id，color，这样我们就可以很容易地引用它并更改它的.innerHTML引用第二个选择框；这样我们就可以改变它的HTML属性是用来改变给定DOM节点(页面上的元素)的HTML.通过设置它，我们可以使用字典(在其他语言中称为contents.|2361780|Then；)来更改该元素的HTML。这是一个将键映射到值的数据结构。在这里，jean是一个键，然后是牛仔裤颜色的HTML值。因此，我们可以在给定密钥的情况下获得HTML。同样，t-shirt是另一个键；它具有不同的value.|2361781|[product]，用于获取给定键的值。因此，如果我们传入jean，它将返回(以字符串形式)我们设置为键的HTML值。然后，它被设置为第二个选择框的HTML码，当页面加载完成时，innerHTML.|2361782|window.onload+=+()=>{updateColors("jean");}会自动调用该函数。这是为了确保在用户填写表单之前表单是有意义的；因为默认情况下选择了jean，所以将第二个选择框的默认内容设置为牛仔裤的颜色是有意义的。|2361783|2361784|entityMap^0|0|0|0|0|0|0|2|C|J|7|0|B|8|N|C|24|4|2I|5|2T|5|31|8|0|E|5|13|A|0|12|4|2G|7|0|0|9|T|4|2H|9|0|0|17|2D|4|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1C|8|@$P|1D|Q|1E|R|S]|$P|1F|Q|1G|R|S]]|9|@]|A|$]]|$1|T|3|U|5|O|7|1H|8|@$P|1I|Q|1J|R|S]|$P|1K|Q|1L|R|S]|$P|1M|Q|1N|R|S]|$P|1O|Q|1P|R|S]|$P|1Q|Q|1R|R|S]|$P|1S|Q|1T|R|S]]|9|@]|A|$]]|$1|V|3|W|5|O|7|1U|8|@$P|1V|Q|1W|R|S]|$P|1X|Q|1Y|R|S]]|9|@]|A|$]]|$1|X|3|Y|5|O|7|1Z|8|@$P|20|Q|21|R|S]|$P|22|Q|23|R|S]]|9|@]|A|$]]|$1|Z|3|10|5|O|7|24|8|@$P|25|Q|26|R|S]|$P|27|Q|28|R|S]|$P|29|Q|2A|R|S]]|9|@]|A|$]]|$1|11|3|12|5|O|7|2B|8|@$P|2C|Q|2D|R|S]|$P|2E|Q|2F|R|S]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]]|15|$]]

<p>Something like this is probably what you're looking for:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function updateColors(product) {
  document.getElementById("color").innerHTML = {
    "jean":    `&lt;option value="black"&gt;Black&lt;/option&gt;
                &lt;option value="blue"&gt;Blue&lt;/option&gt;`,
    "t-shirt": `&lt;option value="yellow"&gt;Yellow&lt;/option&gt;
                &lt;option value="green"&gt;Green&lt;/option&gt;`
  }[product];
}

window.onload = ()=&gt;{updateColors("jean");}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="post" action="result.php"&gt;
&lt;select onchange="updateColors(this.value)"&gt;
    &lt;option value="jean" selected&gt;jean&lt;/option&gt;
    &lt;option value="t-shirt"&gt;t-shirt&lt;/option&gt;
&lt;/select&gt;

&lt;select id="color"&gt;&lt;/select&gt;
&lt;button type="submit"&gt;See products&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<ul>
<li>The function <code>updateColors</code> takes a value, <code>product</code>, which is the value of the first selection box. It uses this to choose which colours to show; and then updates the HTML of that box.</li>
<li>We call <code>updateColors</code> using the <code>onchange</code> event of the first select box. This event is fired whenever the user picks an item; so that the change happens immediately after. From this; I pass <code>this.value</code> - in this context, <code>this</code> refers to the first selection box, and <code>value</code> refers to the <code>value</code> attribute of the selected <code>&lt;option&gt;</code> tag.</li>
<li>I have given the second selection box an id, <code>color</code>, so that we can easily reference it and change its contents.</li>
<li><code>document.getElementById("color")</code> references the second selection box; so we can change its properties.</li>
<li>The <code>.innerHTML</code> property is used to change the HTML of a given DOM node (element on the page). By setting it, then we can change that element's HTML contents.</li>
<li>Then; I use a dictionary (known as a <em>map</em> in other languages). This is a data structure that maps keys to values. Here, <code>jean</code> is a key, and then the HTML for the colors jeans come in is the value. Hence; we can get that HTML given the key. Likewise, <code>t-shirt</code> is another key; which has a different value.</li>
<li><code>[product]</code> is used to get the value for the given key. So if we pass in <code>jean</code>, it gives us back (as a string) the HTML value we set as the key. Then; that is set as the HTML code for the second selection box via <code>innerHTML</code>.</li>
<li><code>window.onload = ()=&gt;{updateColors("jean");}</code> calls this function automatically when the page finishes loading. This is to ensure that the form makes sense before the user fills it out; as <code>jean</code> is selected by default so it makes sense to set the default content of the second selection box to be the colors for jeans.</li>
</ul>


<p>I wabt to create a wizard for this form in a such way to give options of the second input based on the option of the first input</p>

<pre><code>&lt;form method="post" action="result.php"&gt;
&lt;select&gt;
    &lt;option value="jean"&gt;jean&lt;/option&gt;
    &lt;option value="t-shirt"&gt;t-shirt&lt;/option&gt;
&lt;/select&gt;

&lt;select&gt;
    // if jean
    &lt;option value="black"&gt;Black&lt;/option&gt;
    &lt;option value="blue"&gt;Blue&lt;/option&gt;
    // if t-shirt
    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
    &lt;option value="green"&gt;Green&lt;/option&gt;
&lt;/select&gt;
&lt;button type="submit"&gt;See products&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>For example if the user choose t-shirt, it will show him available colors of that item</p>


Wizard with Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想为这个表单创建一个向导，以便根据第一个输入的选项提供第二个输入的选项<form method="post" action="result.php"><select>    <option value="jean">jean</option>    <option value="t-shirt">t-shirt</o...

使用Javascript的向导-腾讯云开发者社区-腾讯云

问使用Javascript的向导
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript的向导EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript的向导
EN