Text Box Appear after Selecting drop down option

[LFDFlorist]

Hi, 

I would like to add an option for a text box to appear if someone selects "Specific Time Delivery" from the drop down selection. Currently, I have code below in my product template liquid, I believe i have to call out some if else code to trigger the appearing of text box. I am not sure on the code as well as where to put it at, really appreciate any help. I am using Debut theme.

Code for drop down selection:

<p class="line-item-property__field">
<label>Time of Delivery</label>
<select required class="required" id="time-of-delivery" name="properties[Time of Delivery]">
<option value="9AM - 1PM">9AM - 1PM</option>
<option value="1PM - 5PM">1PM - 5PM</option>
<option value="5PM - 9PM">5PM - 9PM</option>
<option value="Specific time delivery">Specific time delivery, +$5 surcharge</option>
</select>

Code for input of specific time:

</p>
<p class="line-item-property__field">
<label for="input-specific-time-eg-530pm">Input specific time (e.g. 5.30PM)</label>
<input required class="required" id="input-specific-time-eg-530pm" type="text" name="properties[Input specific time (e.g. 5.30PM)]">
</p>

[Developer-G]

Hello,

Use this one

<script>
$(document).ready(function(){
  $("#time-of-delivery").change(function(){
    $(".hide_int").show();
  });
});
</script>
<style>
.hide_int{
display: none;
}
</style>
<p class="line-item-property__field">
<label>Time of Delivery</label>
<select required class="required" id="time-of-delivery" name="properties[Time of Delivery]">
<option value="9AM - 1PM">9AM - 1PM</option>
<option value="1PM - 5PM">1PM - 5PM</option>
<option value="5PM - 9PM">5PM - 9PM</option>
<option value="Specific time delivery">Specific time delivery, +$5 surcharge</option>
</select>

</p>
<p class="line-item-property__field hide_int">
<label for="input-specific-time-eg-530pm">Input specific time (e.g. 5.30PM)</label>
<input required class="required" id="input-specific-time-eg-530pm" type="text" name="properties[Input specific time (e.g. 5.30PM)]">
</p>

Add script JS code in js file, add style css code in css file and html where you want to use it.
Note: I post this code after testing so please don't say it's not working.

Thanks

[bstown2]

Hi @Developer-G 

I assume the conditional text field only  appears if the "specific time delivery" option is selected?  

When i add this code the conditional text field appear for all the options, and I think this is because i didn't put the script vs style in the correct locations? 

I'm using the minimal theme. 

Any way you could clarify which sections the bits of code go in?

[gfachler_pfi]

I tried this as well and it seems to me too that the filter is missing. How do you define which option should be selected for the 2nd field to be displayed?

[CRC]

@LFDFlorist were you able solve this? Are you able to send me the coding you use to do so?  I am trying to do the same thing. If I use the code provided by Guleria, the text box shows for all selections, and not just the one. If you are able to help, I'd really appreciate it. Thanks!