Asked  7 Months ago    Answers:  5   Viewed   48 times

Can someone confirm that its not possible to change the height of a dropdown that is shown when you click on a select box.

The size attribute of the select makes it look like a list, the height attribute in the CSS doesnt do much good either.

 Answers

88

Confirmed.

The part that drops down is set to either:

  1. The height needed to show all entries, or
  2. The height needed to show x entries (with scrollbars to see remaining), where x is
    • 20 in Firefox & Chrome
    • 30 in IE 6, 7, 8
    • 16 for Opera 10
    • 14 for Opera 11
    • 22 for Safari 4
    • 18 for Safari 5
    • 11 in IE 5.0, 5.5
  3. In IE/Edge, if there are no options, a stupidly high list of 11 blanks entries.

For (3) above you can see the results in this JSFiddle

Tuesday, June 1, 2021
 
simPod
answered 7 Months ago
72

simple ajax using jquery

index page

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $('#myDropDown').change(function(){
                //Selected value
                var inputValue = $(this).val();
                alert("value in js "+inputValue);

                //Ajax for calling php function
                $.post('submit.php', { dropdownValue: inputValue }, function(data){
                    alert('ajax completed. Response:  '+data);
                    //do after submission operation in DOM
                });
            });
        });
        </script>
    </head>
<body>
    <select id="myDropDown">
        <option value='' disabled selected>Assign Driver</option>
        <option value='4353'>Steve Jobs</option>
        <option value='3333'>Ian Wright</option>
        <option value='66666'>Mark James</option>
     </select>

</body>
</html>

in submit.php

<?php
function processDrpdown($selectedVal) {
    echo "Selected value in php ".$selectedVal;
}        

if ($_POST['dropdownValue']){
    //call the function or execute the code
    processDrpdown($_POST['dropdownValue']);
}

for simple js ajax use XMLHttpRequest

Saturday, May 29, 2021
 
Francisunoxx
answered 7 Months ago
69

You can save the Element.scrollTop and set it at the end.

$("select").mousedown(function(e){
    e.preventDefault();

    var select = this;
    var scroll = select .scrollTop;

    e.target.selected = !e.target.selected;

    setTimeout(function(){select.scrollTop = scroll;}, 0);

    $(select ).focus();
}).mousemove(function(e){e.preventDefault()});

http://jsfiddle.net/UziTech/cjjg68dr/114/

Thursday, June 3, 2021
 
kwichz
answered 7 Months ago
51

That should do it:

<select >
    <option value="1" <?php echo ($Defaultselection == 1)?"selected":""; ?>>A</option>
    <option value="2" <?php echo ($Defaultselection == 2)?"selected":""; ?>>B</option>
    <option value="3" <?php echo ($Defaultselection == 3)?"selected":""; ?>>C</option>
    <option value="4" <?php echo ($Defaultselection == 4)?"selected":""; ?>>D</option>
</select> 

or this other one:

<select >
    <option value="1" <?php if ($Defaultselection == 1) echo "selected"; ?>>A</option>
    <option value="2" <?php if ($Defaultselection == 2) echo "selected"; ?>>B</option>
    <option value="3" <?php if ($Defaultselection == 3) echo "selected"; ?>>C</option>
    <option value="4" <?php if ($Defaultselection == 4) echo "selected"; ?>>D</option>
</select> 
Saturday, August 7, 2021
 
Seibar
answered 4 Months ago
23

Just don't make it a select multiple, but set a size to it, such as:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

Working example: https://jsfiddle.net/q2vo8nge/

Friday, September 3, 2021
 
rypskar
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share