Solved

Display default option select message

Posted on 2014-12-10
4
188 Views
Last Modified: 2014-12-10
I am trying to find a way that when a jQuery chosen select dropdown is populated from php, then the first item should be 'Select an item'. At the moment, when the dropdown is populated, it displays all items and as such makes a change event difficult because it is already selected. I have even tried to change the placeholder text, but it does not change anything.

I would be grateful if someone could show me how to do this. Thanks

jQuery code

$(function() {
  $("#dstr_customer").change(function() {
    $(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>');
    $.get('loadboxCustDstrsubcat.php?custdstrdept=' + $(this).val(), function(data) {
      $("#dstr_dept").html(data);
      $('#loader').slideUp(200, function() {
        $(this).remove();
        $("#dstr_dept").trigger("chosen:updated");
      });
    });
  });
});

Open in new window


php code

<?php
 session_start();
?>
<?php
    include('../Connections/domain.php');
     
    $dstrdept = $_GET['custdstrdept'];
    $customer = $_SESSION['kt_idcode_usr'];
	
    mysql_select_db($database_domain, $domain);
    $query = "SELECT name FROM departments WHERE code = '".$dstrdept."' ORDER BY name ASC";
	$result = mysql_query($query) or die (mysql_error());
	
	if (mysql_num_rows($result) > 0) {
	
	echo "<script type=text/javascript>\n";
	echo "$(function() {\n";
	echo "$(\".noDept\").html('')\n";
	echo "$('#dstr_dept').attr('data-placeholder', \"Choose your dept...\").prop('disabled', false)\n";
	echo "});\n";
	echo "</script>\n";
	
	while($row = mysql_fetch_array($result)) {
    echo "<option value='$row[name]'>$row[name]</option>";
       }    
	
	} else {
	
	echo "<script type=text/javascript>\n";
	echo "$(function() {\n";
	echo "$('.noDept').html('ERROR: There are no departments. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n";
	echo "$('#dstr_dpet').attr('data-placeholder', \"No depts to display...\").prop('disabled', true)\n";
	echo "});\n";
	echo "</script>\n";
	}
?>

Open in new window


html code

<div class="fieldset">
          <h1><span>Select a Department</span></h1>
          <p>
            <select data-placeholder="Choose a dept..." style="width:250px;" name="dstr_dept" id="dstr_dept">
              <option value=""></option>
              
            </select>
            
            <a href="javascript:void(0)" style="margin-left:10px;" class="tooltip" title="Please select a dept where the box to be destroyed is stored.">Help</a><br /><span></span>
          </p>
		  <div class="noDept"></div>
        </div>

Open in new window

0
Comment
Question by:peter-cooper
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40491237
Change this:
$("#dstr_dept").html(data);

Open in new window

to this:
$("#dstr_dept").append(data);

Open in new window

0
 

Author Comment

by:peter-cooper
ID: 40491874
Only works on the first change event. No event fired on subsequent changes. Thanks
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40491917
Ah you fill the select several times?
What about something like this:
data = '<option value=""></option>' + data;
$("#dstr_dept").html(data);

Open in new window

0
 

Author Closing Comment

by:peter-cooper
ID: 40492232
Thank you very much
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question