Geek Answers Handbook

Javascript hide / show items in drop down list

I started learning javascripting and was wondering if anyone knows how to hide the values ​​in the dropdown for html?

For example: dropdwon list with values

Select One   
Item1   
Item2    
Item3  
Item4  
Item5

I want to hide items 4 and 5 like this, and show it when the "Show ..." button is clicked.

Select One  
Item1  
Item2  
Item3  
Show 2 more items (Item 4 and 5 hidden)

Is it possible? Below is a snippet of code that I have already started.

var css = select;
var markers = cluster.getMarkers();
var markersLength = markers.length;

var nextOption = new Option("Select One");
css.add(nextOption, 0);

for(var i = 0; i < markersLength; i++) {

    nextOption = new Option(markers[i].title);
    try {
        css.add(nextOption, -1);
    } catch (e) {
        css.add(nextOption, null);
    }
}
+4
source share
3 answers

You need a general solution, so mark the parameter moreand hidden elements with classes.

, option select , : . : <option> <select> CSS?

( select):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/93D3h/12/

HTML:

Select One   
<select class="hidden">
    <option>Item4</option>
    <option>Item5</option>
    <option>Item6</option>
    <option>Item7</option>
<select>
<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option class="more">More</option>
</select>

JQuery

$('select').change(function(){
    var $select = $(this);
    if ($select.val() == "More"){
    $('.more').remove();
        $select.append($('.hidden').children());
    }
});

:

, select , more :

JSFiddle: http://jsfiddle.net/TrueBlueAussie/93D3h/2/

$('select').change(function(){
    var $select = $(this);
    if ($select.val() == "More"){
    $('.more').hide().prevAll('.hidden').show();
    }
});

, select , ( !). , .. , ( - : , ).

"", .

. http://jsfiddle.net/TrueBlueAussie/93D3h/3/

$('select').change(function () {
    var $select = $(this);
    if ($select.val() == "More") {
        $('.more').hide().prevAll('.hidden').show();
        $select.val('');
    }
});

Followup:

, : <option> <select> CSS? , , .

+1

:

Html

    <select id="test">
    <option value="1">Select One</option>
    <option value="2">Item 1</option>
    <option value="3">Item 2</option>
    <option value="4">Item 3</option>
    <option value="5">Select Two</option>
    <option value="6">Item 4</option>
    <option value="7">Item 5</option>
    </select>

Script

    var array1 = ["1","6","7"];
    var array2 = ["1","2","3","4"];
    var arrayAll = ["1","2","3","4","5","6","7"];
    function hideOptions(array) {
    for (var i = 0; i < array.length; i++) {
        $('#test option[value="' + array[i] + '"]').hide();
    }
    }

    function showOptions(array) {
    for (var i = 0; i < array.length; i++) {
        $('#test option[value="' + array[i] + '"]').show();
    }
    }


    $("#test").change(function(){
    if($("#test").val()=="5"){ 
        hideOptions(array2);
        showOptions(array1);
    }
    if($("#test").val()=="1"){ 
        hideOptions(array1);
        showOptions(array2);
    }
    });

    hideOptions(array1);

fiddle

0

- :

<head>
  <script type="text/javascript">
  function makeDynamicOption(target, threshold, messageMore, messageLess) {
    var allOptions = collectOptions();
    target.addEventListener("change", updateOptions, false); // Use your own event manager
    showOptions(threshold);
    addMessage(messageMore);

    // ---

    function collectOptions() {
      var options = [];
      for(var ii=0; ii<target.options.length; ii++) {
        options.push(target.options[ii]);
      }
      return options;
    }

    function updateOptions() {
      var selectedText = this.options[this.selectedIndex].text;
      if (selectedText == messageMore) {
        showOptions(allOptions.length);
        addMessage(messageLess);
      } else if (selectedText == messageLess) {
        showOptions(threshold);
        addMessage(messageMore);
      }
    }

    function showOptions(upToIndex) {
      removeOptions();
      for (var ii=0; ii<upToIndex; ii++) {
        target.options[ii] = allOptions[ii];
      }
    }

    function removeOptions() {
      while(target.options.length > 0) {
        target.removeChild(target.options[0]);
      }
    }

    function addMessage(message) {
      target.options[target.options.length] = new Option(message, "");
    }
  }
  </script>
</head>

<body>
  <select id="foo">
    <option value="value1">item1</option>
    <option value="value2">item2</option>
    <option value="value3">item3</option>
    <option value="value4">item4</option>
    <option value="value5">item5</option>
  </select>
  <script type="text/javascript">
  makeDynamicOption(
    document.getElementById("foo"),
    3,
    "More...",
    "Less..."
  );
  </script>
</body>

lib ( HEAD script) . , , . , , addEventListener , script, -.

EDIT: :

  • makeDynamicOptions() , , , , , / . , .. .
  • , , . , , / , .
  • change , . script addEventListener, -.
  • .
  • The rest is pretty simple. As soon as the user selects an option, the script decides whether to re-populate the parameter list by analyzing the text of the selected parameter and comparing it with the provided extension / smoothing shortcuts. If the parameters need to be redrawn, the script deletes all the parameters, adds the expected ones, and then adds a new expand / collapse message.

NTN.

0
source

More articles:


All Articles