Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Display default option select message

Posted on 2014-12-10
4
Medium Priority
?
207 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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

610 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