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/

Different classes in different display sizes

I want class 'myclass' and 'col-3' only to be applied in lg size. In other cases I want only 'col'. How to do that?
I can do that:
<div class="d-none d-lg-block">
<div class="myclass col-3">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
<div class="d-block d-lg-none">
<div class="col">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
But there is a problem that I have two select forms with the same id 'country-select' and my jquery functions don't work correctly. I need the solution with only one select form with id ='country-select'.
I don't want to send data from select forms to server, so I don't need 'name' attribute. I need to use $("#country-select").val() in jquery code, but there is a problem I have two select forms with id ='country-select' in my solution.

Based on your condition for adding or removing class, you can use jquery:
$('.className').addClass('lg-size-class');
$('.className').removeClass('lg-size-class');
Note that id attribute should have a unique value when using it.

Controlling displaying option in 2 list using jsp and bootstrap

I'm using coreui.io in one of my project coded with jsp and on a page, I have 2 dropdown list like this:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="card"> List 1 </label>
<select class="form-control" name="arg1">
<option >option 1</option>
<option>option 2</option>
</select>
</div>
</div>
</div>
Then, I have:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="bank"> List 2 </label>
<select class="form-control" name="arg2">
<option>1. related to selection of option1</option>
<option>2. related to selection of option1</option>
<option>3. related to selection of option2</option>
<option>4. related to selection of option2</option>
</select>
</div>
</div>
</div>
My question is that I want whenever user select option1 in List 1, automatically see only option 1 and 2 in List 2 and whenever select option 2 in List 1, see only option 3 and 4 in List 2. I'm using jsp and bootsrap4(coreui.io)
How Can I do this?
The another question is that when we have too many options, it's really boring to scroll these option to the end, Do we have better feature tho display rather than a dropdown list?
Regards

Show/Hide Div (a long list) on Select

There are many solutions to show/hide on select in stackoverflow, and almost all of them help when the number of select and divs are small finite number. I am looking for a solution when the select list is really long, maybe over 40 and there are equivalent number of divs.
Is there a generic way to enable show/hide in this situation.? However, If there are SO posts on this, please point them to me.
Here is my HTML structure...
<div class="form-group">
<label class="col-md-4 control-label" for="changeType">Type of Change</label>
<div class="col-md-4">
<select id="changeTypeSelect" name="changeTypeSelect" class="form-control">
<option value="">--- SELECT ---</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
..
...LOT MORE HERE...
.....
<option value="2">three</option>
</select>
</div>
</div>
<div id="1" class="changeTypeDiv">
<hr>
<h1>ONE</h1>
</div>
<div id="2" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>
...
....LOT MORE HERE.....
...
<div id="3" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>
I need to be able to show a DIV on select and hide the rest.
UPDATE to question
If I had more than one select option boxes, do I need to replicate the script or write new function...here is what I tried to do, but it does not work.
DISCLAIMER - It might be evident that I don;t have much insight into coding :)
$(function() {
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#"+$(this).val()).show();
});
$(".addGUIdiv").hide();
$("#addedGUIselect").change(function(){
$(".addGUIdiv").hide();
$)"#"+$(this).val()).show();
});
});
The above does not work..making me guess, I might need a new function..please help.
Thanks
Brijesh.

You can do like this,
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function() {
$(".changeTypeDiv").hide();
$(".changeTypeDiv").eq($(this).val() - 1).show();
});
Here I am taking the index based selection..
Fiddle
Other Possible solution is to give a data-attribute to the div elements. Then show the proper div accordindg to the selection.

You need to create a relation between selected value and div.
as per your comment, Since you have defined the relation. IDof div is same as value of select.
you can use it like
HTML
<select id="changeTypeSelect" name="changeTypeSelect" class="form-control">
<option value="">--- SELECT ---</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="1" class="changeTypeDiv">
<h1>ONE</h1>
</div>
Script
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#"+$(this).val()).show();
});
DEMO

Hide all of them then show the one with id = value of select event.
$(".changeTypeDiv").hide(); // Hide all
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#" + $(this).val()).show();
});

Selecting a specific div among similar div

I'm looking for guidance on the following scenario:
Context: A page displays a dynamically generated list with X (changes based on the user) number of items, each formatted as follows:
<div class="dashboard_section_item">
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div> Edit
<label for="add_listname_label">Assign to list</label>
<br/>
<select name="mod_list" class="mod_list">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="hidden" name="prod_uid" class="prod_uid" value=”55872761">
</div>
1st issue: Need to show a modal div on top of a product div when the user clicks on a specific item Edit link.
Current code: It seems I have to specify a unique ID for each modal so it knows which item it is associated with. What I have done(see above) is add the item uid to the id and href tags when the list is generated so it’s mapped accordingly for each item which works fine.
Is there a better way to to this?

If I'm understanding you, something like this should do:
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div>
<a class="someClass" href="#openModal_55872761">Edit</a>
$(document).on('click', 'a.someClass', function() {
$(this).prev('.modalEdit').modal('show');
});