How to hide values in dropdown in javascript?

Edit: Thanks everybody, but nothing seems to work. I am inserting this code in a file that I know is being used and that contains other javascript blocks normally formatted, and this still doesn't work. It works in a fiddle, but not on my code. I guess this is too specific to the platform and extension that I'm trying to modify (this is part of a Magento checkout step modified by a third party extension). I will start looking into replacing the list with a manually generated one. Thanks again.

I am trying to hide an option in a dropdown list that is dinamically generated. The CSS solution doesn't work on all browsers, and even though I have found several similar questions here, neither one offers a solution that works for me.

Here's what my list renders like:

<select id="timeselect" name="adj[delivery_time][]" title="El plazo de la entrega" class="adjtimeselect select" type="time" ><option id="option-10" value="10" >10</option>
<option id="option-11" value="11" >11</option>
<option id="option-12" value="12" >12</option>
<option id="option-13" value="13" >13</option>
<option id="option-14" value="14" >14</option>
<option id="option-15" value="15" >15</option>
<option id="option-16" value="16" >16</option>
<option id="option-17" value="17" >17</option>
<option id="option-18" value="18" >18</option>
<option id="option-19" value="19" >19</option>
<option id="option-20" value="20" >20</option>
</select> 

I need to hide the option with value "12" for example. I am using this JS:

$("#timeselect option[value='12']").remove();

Any advice would be greatly appreciated since I'm new to JS.

Thanks.

I need to implement display logic (not using the Qualtrics GUI) using Javascript in a "Multiple Choice" question in the "Dropdown" format, with that logic selectively hiding a subset of potential choices based on the value of an Embedded variable.

Survey flow:

• Question 1 (name=QR~QID1): display all numbers 1 through 5; choose a number.
• Create embedded variable (name=emd_threshold) equaling the choice from Question 1
• Question 2 (name=QR~QID2): display only the numbers 1 through 5 that are less than or equal to the choice from Question 1; choose a number.

Example: if "3" was chosen in Question 1, then only "1, 2, 3" would be shown in Question 2.

Below is code that successfully works when the second question is a "List" format, but I cannot determine how to change it to accommodate a "Dropdown" format.

Qualtrics.SurveyEngine.addOnload(function()
{
    var threshold = parseInt("${e://Field/embd_threshold}");
    
    for (let i = 1; i <= 5; i++) {
        var choiceoption = "QR~QID2~" + i
        
        if (i > threshold) {
            $(choiceoption).up().hide();
        }
    }
    
});

Note: I need to Use Javascript here because the real application of this problem involves choice options in the hundreds, for which manual use of Qualtrics' GUI to set display logic for every possible choice and condition is impractical.

Please suggest if below works as i want to hide a drop down value based on other drop down value selection , but it is not working as expected.

var dropdown1 = $(":input[title='Engagement Type']");

if(dropdown.find("option[value='Tracking Number request']")==true)
{
  dropdown1.find("option[value='CR(Change Request)']").remove();
  }

asked Sep 3, 2020 at 6:30

0

You can write the below change event of the first drop-down and hide the option of the second drop-down based on the selected value of the first drop-down.

Drop-down 1's ID = dropdown1

Drop-down 2's ID = dropdown2

   $("#drop-down1").change(function(){
            var selectedValue = $(this).children("option:selected").val();
            if(selectedValue === "Tracking Number request")
            {
                $("#drop-down2 option[value='CR(Change Request)']").remove(); 
            }       
    });

answered Sep 3, 2020 at 7:54

Divya SharmaDivya Sharma

1,3509 silver badges24 bronze badges

4

you should just edit the condition in your if. Just use as below

if(dropdown.find("option[value='Tracking Number request']"))
{
  dropdown1.find("option[value='CR(Change Request)']").remove();
}

answered Sep 3, 2020 at 6:41

Akshay RandiveAkshay Randive

2,8651 gold badge14 silver badges31 bronze badges

1

Try this:

<select title='Field A'>
  <option key="A">A</option>
  <option key="B">B</option>
  <option key="C">C</option>
</select>

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script> 
<script type="text/javascript">
         $(document).ready(function () {
            $("select[title='Field A']").change(function () {
           
                if ($("[title='Field A'] option:selected").text() == "A") {
                    $("[key='C']").hide()
                }
                
            });
        });

</script>

answered Sep 4, 2020 at 6:14

AmosAmos

1,9141 gold badge4 silver badges10 bronze badges

How do I hide a selection dropdown?

How do I hide a drop

How do you enable disable a dropdown based on value in another dropdown in JavaScript?

How do I show hidden div when select options are clicked?