---
# System prepended metadata

title: 表單設定form validation 選單other跳轉輸入方式
tags: [前端切版技巧, 表單設計, form validation]

---

# 表單設定form validation 選單other跳轉輸入方式

###### tags: `form validation`  `前端切版技巧` `表單設計`

#### 如果選單選擇有other其他選項,跳轉手動textarea要怎樣做呢?

<iframe height="265" style="width: 100%;" scrolling="no" title="dyMRWEK" src="https://codepen.io/corly74/embed/dyMRWEK?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/corly74/pen/dyMRWEK'>dyMRWEK</a> by peiyun
  (<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>








```
<select id="slct" name="reason" class="custom-select my-4" >
<option selected>How do you know us? </option>

<option value="1">Internet</option>
<option value="2">PTT/Dcards/blog(social platform)</option>
<option value="3">Google adwords</option>
<option value="Other">Others</option>
 </select>
<textarea class="form-control" form="input" id="txtareaknowus"  
placeholder="Write another way here..." rows="1" cols="30"></textarea>
```

```
<script> 
$("#txtareaknowus").hide();
$( "#slct" ).change(function() {
  var val = $("#slct").val();
    if(val=="Other"){
        $("#txtareaknowus").show();
    } else {
                $("#txtareaknowus").hide();
    }
});
 </script>
```
    
