Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Select2 not working on localhost (html-PHP)

I am trying to use select2, but for some reason it does not work. The code below is fairly simple: it pulls data from a Microsoft SQL database, and creates a dropdown list.

All of this is running on a localhost currently.

Tried many different changes but nothing works…

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="mystyle.css">
        <title>--</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <script src="myScript.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    </head>
    
    <?php
        $serverName = '--';
        $uid = '--';
        $pwd = '--';
        $databaseName = 'Risk_Management';
        $connectionInfo = array( 'UID'=>$uid,'PWD'=>$pwd,'Database'=>$databaseName);
        $conn = sqlsrv_connect($serverName,$connectionInfo);
        if($conn){echo '';}else{echo 'Connection failure<br />';die(print_r(sqlsrv_errors(),TRUE));}
        // SQL query to select data from mytable
        
        $customer = "SELECT customer FROM Credit_Analysis";
        $resultSet = sqlsrv_query( $conn, $customer) ;
        // Check if query is successful
        
        if( $stmt === false) {
                die( print_r( sqlsrv_errors(), true) );
            }
    ?>
    

    <div style="margin-bottom: 20px;">
        <select class="shortenedSelect" id="#customer">
        <?php
            while ($row = sqlsrv_fetch_array( $resultSet, SQLSRV_FETCH_ASSOC))
            {
                $customer = $row['customer'];
                echo "<option value = '$customer'>$customer";
            }
        ?>
        </select>
    </div>
        
    <script type="text/javascript"> 
        $(document).ready(function() {
            $('#customer').select2();
        });
    </script>
    

    </body>
</html>
Tags:

2

Answers


  1. 0

    Here are the issues in your code:

    1. You don’t need a # in the ID name. Change <select class="shortenedSelect" id="#customer"> to <select class="shortenedSelect" id="customer">.
    2. You are missing the closing </option> tag at the end of the line echo "<option value='$customer'>$customer";.
    Login or Signup to reply.
  2. 0

    Sorry to say, but your code is very messed up 😀

    Below an example using part of your code, of course without database data. Up to you to adapt

    <!DOCTYPE html>

<html>
<head>
    <title>Ossiano Capital Risk Management</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>


<div style="margin-bottom: 20px;">
    <select class="shortenedSelect" id="customer">
        <option value = '1'>Test 1</option>
        <option value = '2'>Test 2</option>
        <option value = '3'>Test 3</option>
    </select>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#customer').select2();
    });
</script>


</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search