Solved

Display default option select message

Posted on 2014-12-10
4
181 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
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.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 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