Develop Reference

How to add Chosen placeholder text on mobile devices?

I'm trying to fix a bug on a Worpress theme using jquery-Chosen multi select tool. Here is the page in which the form is: http://mitramimoveis.com.br/temp/ . The placeholder works well on desktops and is input through the theme's interface:
Theme's interface
However, on mobile devices, the multi select fields only show "0 selected", on Android and "0 Items", on iPhone. The placeholder I put doesn't show up at all. I already tried adding a blank Option as first, using custom jQuery through the "Custom CSS and JS" Wordpress plugin, but it didn't work - all the answers I found regarding this issue, addressed this as a solution.
The html code for the forms:
<!-- Row -->
<div class="row with-forms">
<div class="search-form-_property_type col-md-3 custom-tipo-imovel">
<select multiple name="_property_type[]" name="_property_type" id="_property_type" data-placeholder="Tipo de imóvel" class="chosen-select">
<option value="">Tipo de imóvel</option>
<option value="apartamento">Apartamento</option>
<option value="casa">Casa</option>
<option value="sobrado">Sobrado</option>
</select>
</div>
<div class="search-form-_cidade col-md-3 custom-tipo-imovel">
<select multiple name="_cidade[]" name="_cidade" id="_cidade" data-placeholder="Cidade" class="chosen-select">
<option value="">Cidade</option>
<option value="Curitiba">Curitiba</option>
<option value="Campo Largo">Campo Largo</option>
</select>
</div>
<div class="search-form-tax-region col-md-3 custom-tipo-imovel">
<select multiple name="tax-region[]" data-placeholder="Bairro" class="chosen-select">
<option value="">Bairro</option>
<option value="bigorrilho">Bigorrilho</option>
<option value="cabral">Cabral</option>
<option value="centro">Centro</option>
<option value="portao">Portão</option>
</select>
</div>
<div class="col-md-3 ">
<button class="button fullwidth">Buscar</button>
</div>
</div>
How can I solve this? I need the users to know what are the options about on each field and the theme doesn't offer a label (which I also don't want to use). Thanks.
*I noted that the first option is the same as the placeholder and has an empty value.

Hope this is welcomed feedback but placeholder text isn't ADA compliant. Here are some resources that can help you take a different approach if you so choose:
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research
Example:
https://material-ui.com/components/selects/

Data not binding properly in angular in list box

I am using the below to code to get data in a list box.
<div class="form-group">
<label class="control-label col-md-6">Year Built</label>
<div class="col-md-6">
<select ng-model="property.yearBuilt"
id="yearBuilt"
rb-default-year="currentYear"
ng-options="year.yearFourDigit as year.yearFourDigit for year in years">
<option value="">--Select--</option>
</select>
</div>
</div>
But somoehow the data is not binding properly with html. I am getting blank list box 50% of the times.
Can anyone please help me in this?
I wanted to post a picture showing what I am seeing, but I don't have a 10 in reputation to be able to do that.

ngOptions in Angular not generating options

I need some help from angularjs ninjas...
I am currently using cake with angular. I have a rest controller which allows angular to communicate and get a list of options.. the service returns a serialized json as shown below
Below is how im trying to generate the options for the dropdown :
<div class="row" ng-controller="trackerCtrl">
<div class="col-md-4">
<label class="control-label" for="trackers">Choose Tracker</label>
<select id="tracker" name="tracker" ng-model="tracker" ngOptions="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker">
<option>Select Tracker</option>
</select>
</div>
</div>
With the above, I get this in the DOM
<select id="tracker" name="tracker" ng-model="tracker" ngoptions="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<option value="Select Tracker">Select Tracker</option>
<!-- Load options -->
<!--<option value=""></option>-->
</select>
I also tried using ng-repeat with the same result, so I am guessing the JSON format is incorrect..
Any help is greatly appreciated since I am baffled with this as it seems pretty straight forward.
Kindly excuse my ignorance but i'm new to angular.

try this
<div class="row" ng-controller="trackerCtrl">
<div class="col-md-4">
<label class="control-label" for="trackers">Choose Tracker</label>
<select id="tracker" name="tracker" ng-model="tracker" ng-options="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker">
<option>Select Tracker</option>
</select>
</div>
</div>

ngOptions vs ng-options?
<select
id="tracker"
name="tracker"
ng-model="tracker"
ng-options="tracker.Tracking.description for tracker in trackers"
class="form-control custom-input tracker"
>
I'm not sure if both notations are supported, never used the one without the dash. Try it.
If that doesn't work I guess the expression in ng-options is wrong. See the documentation.

Jquery mobile flipswitch toggle for gender (like Tinder)

I am working on an app that will have a setting page where the user can use the flip toggle to select the gender. The flip toggle consist of male (on off)and female (on off). Depending of the selection, an ul list will display with gender preference. I am struggling trying to find a solution with PHP or JQuery/JavaScript. Any code solution from you guys?
The HTML5 code:
<div data-role="page" id="page-settings" class="page-panel">
<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >
<label for="flip-1">Men</label>
<select name="flip-1" id="flip-1" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
<div data-role="fieldcontain" id="womenSelector" >
<label for="flip-2">Women</label>
<select name="flip-2" id="flip-2" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
The -ul -li list is appending from database +item.Gender+ with values : female or male.
Any help will be very appreciated since I have been searching foo three days with no success.

select won't show itself and choosing an option won't work

i got a html-dummy (http://www.gisa.de/formular_test/anmeldeformular.html) from another company and now i am trying to create a web-form (http://www.gisa.de/2359.html) based on that dummy.
i am using the same scripts, the basic structure is the same as the dummy, i've compared the sh** out of the code and found nothing. I found one thing with firebug: the site with the non-working select-block won't call the function custom_select from the script.js file - but why???
i hope someone will find a solution, or something that i've just overlooked
i made 2 jsfiddle out of it:
http://fiddle.jshell.net/WbXsv/1/
http://fiddle.jshell.net/95Q8P/1/

The code is not the same. On your page, you're missing two spans in your div select.
Your page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</div>
Their page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
<span class="select-icon"></span>
<span class="select-box">bitte auswählen</span>
</div>
Adding those solved the issue.

You have:
.js select {
opacity: 0;
}
in gisa.css and custom_select function is adding custom html in place of hidden select.