We Keep Coding

How to update value in dropdown based on text selection

I am working on a React-based Google Docs clone as a side project. I'm using TipTap as the base.
I wanted to try to mimic the functionality in Google Docs where the select field would update with the appropriate value based on whatever text the user selects (ex., "heading 1" would show up on
the select field if a user highlights text with <h1></h1> styling).
Here's a small video of the functionality I want to mimic: https://i.gyazo.com/18cc57f0285c8c5cd80d5dd6051f0ee7.mp4
This is the code I have so far with the React Hook used for the select fields:
const [font, setFont] = useState('sans-serif')
const handleFontChange = (e) => {
setFont(e.target.value)
editor.chain().focus().setFontFamily(e.target.value).run()
}
return (
<select value={font} onChange={handleFontChange}>
{fontFamilies.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}
</select>
)
I've tried to wrap my head around React Hooks and the Selection API, but I'm stuck. Is this at all possible in Javascript/React?
EDIT:
I found a function from Tiptap's API that does exactly what I'm looking for. I guess now the problem is how do I update that value into the select? Here's my new code:
const font = [
{ value: 'sans-serif', label: 'Sans-serif' }, ...
]
const [selectedFont, setSelectedFont] = useState([])
const handleFontChange = (obj) => {
setSelectedFont(obj)
editor.chain().focus().setFontFamily(obj.value).run()
console.log(editor.isActive('textStyle', {fontFamily: selectedFont.value})) // prints true if the user clicked on text with the property active, otherwise prints false
}
return (
<Select
name="fontFamily"
options={font}
isClearable="true"
isSearchable="true"
value={selectedFont}
onChange={(option) => handleFontChange(option)}
/>
)
It feels like the solution is really simple but I'm just overthinking it.

So I finally figured out what to do. I needed to pass a function in value that iterated over the array:
const fontList = [
{ label: 'Sans-serif', value: 'sans-serif' },
...
]
<Select
name="fontFamily"
placeholder="Select font..."
value={
editor.isActive('textStyle', {fontFamily: font}) ? (
selectedFont.find(index => fontList[index])
) : ''
}
options={fontList}
onChange={({value: fontSel}) => {
setFont(fontSel)
editor.chain().focus().setFontFamily(fontSel).run()
}}
/>
It only took me a whole week of tearing my hair out... Glad to finally get this done.

Just to add to this, I was able to do the following in Vue to select headings with a dropdown.
<select
:value="editor.isActive('heading') ? editor.getAttributes('heading').level : 0"
#input="setSelectedHeading"
>
<option
v-for="heading in headings"
:key="heading.value"
:label="heading.label"
:value="heading.value"
/>
</select>
headings: [
{ value: 0, label: 'Normal text' },
{ value: 1, label: 'Heading 1' },
{ value: 2, label: 'Heading 2' },
{ value: 3, label: 'Heading 3' },
{ value: 4, label: 'Heading 4' },
{ value: 5, label: 'Heading 5' },
{ value: 6, label: 'Heading 6' }
]
setSelectedHeading (selected) {
if (selected === 0) {
const selectedLevel = this.editor.getAttributes('heading').level
return this.editor.chain().focus().toggleHeading({ level: selectedLevel }).run()
}
return this.editor.chain().focus().setHeading({ level: selected }).run()
}

In case someone wants to create a simple dropdown menu with vue and tiptap, since this doesn't seem to work:
<select class="font-type">
<option #click="editor.chain().focus().setParagraph().run()" selected>Paragraph</option>
<option #click="editor.chain().focus().toggleHeading({level: 1}).run()">Heading 1</option>
<option #click="editor.chain().focus().toggleHeading({level: 2}).run()">Heading 2</option>
<option #click="editor.chain().focus().toggleHeading({level: 3}).run()">Heading 3</option>
</select>
you can do this:
<select class="font-type" #change="toggleType(editor, $event)">
<option value="p" selected>Paragraph</option>
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
</select>
and add this to your <script>:
const toggleType = (editor, event) => {
if (event.target.value == 'p') {
editor.chain().focus().setParagraph().run()
} else {
editor.chain().focus().toggleHeading({level: Number(event.target.value)}).run()
}
}

Setting Selected value in a Angular Select

Angularjs 1.5.5
I have a simple Select which works fine:
<select ng-model="selectedPart">
<option ng-repeat="optionPart in parts" value="{{optionPart.Id}}">{{optionPart.Title}}</option>
</select>
When I set the id as a string, the Select renders that correctly:
$scope.selectedPart = "1";
When I set it to an Int from an object, no change is made.
$scope.selectedPart = $scope.parts[0].Id;
Why does the Int not update the Select but the string does, and how would I get it to work?

Try it like this instead
<select ng-model="selectedPartId"
ng-options="part.Id as part.Title for part in parts">
</select>
Note that I've changed the model to reflect that you're selecting an id and not a parts entry.
If you did want to bind an object, try this
<select ng-model="selectedPart"
ng-options="part.Title for part in parts track by part.Id">
</select>
You could then assign it via $scope.selectedPart = $scope.parts[0];

There are two ways in which you can do it:
1. $scope.parts = [{
id: 2,
Title: 'XX'
}, {
id: 5,
Title: 'XXXX'
}, {
id: 8,
Title: 'XXVVV'
}];
$scope.selectedPart = $scope.parts[1];
<select ng-options="part as part.Title for part in parts track by part.id" ng-model="selectedPart"></select>
2. $scope.parts = [{
id: 2,
Title: 'XX'
}, {
id: 5,
Title: 'XXXX'
}, {
id: 8,
Title: 'XXVVV'
}];
$scope.selectedPart = $scope.parts[1].id;
<select ng-options="part.id as part.Title for part in parts" ng-model="selectedPart"></select>

Angularjs Select Option set to first item did not work

I am working with angular and semantic ui. I am trying to make a selection of Y and N through a select option. Basically i just want the first item was selected when the page show up. Tried many ways but i couldn't make it works.
Please take a look at this plunker.
angular.module('myapp', [])
.controller('testctrl', function ($scope){
$scope.add = {};
$scope.Consigns = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
$scope.add.consign = $scope.Consigns[0].label;
})
.controller('testctrl1', function ($scope){
$scope.add = {};
$scope.Consigns1 = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
$scope.add.consign1 = $scope.Consigns1[0].label;
});
https://plnkr.co/edit/cHcLd14xKFxLMS4uy0BM?p=preview

Print the model value in default placeholder. Rather than sending the label value in $scope.add.consign you could send the whole object and print whats required.
Working plunker: https://plnkr.co/edit/XeuiS7p3K1OOx5nHL9c5?p=preview

javascript:
$scope.ListOrder =
[
{ Name: "price", Id: 1 },
{ Name: "exist", Id: 2 },
{ Name: "Sale", Id: 3 },
{ Name: "New", Id: 4 }
];
$scope.Order = { Name: "exist", Id: 1 };
HTML:
<select ng-model="Order" ng-options="obj.Name for obj in ListOrder"></select>

Remove
<script>
$('.ui.dropdown').dropdown();
</script>
and also change select tag to this
<select ng-model="add.consign" class="ui fluid dropdown" ng-options="x.label as x.label for x in Consigns">
<option value=""></option>
</select>

How to pre-select values in select2 multi select?

I am having a multiple select like this:
<select multiple="multiple" class="myList">
<option value="1" selected="selected">Apple</option>
<option value="2" selected="selected">Mango</option>
<option value="3" selected="selected">Orange</option>
</select>
Now, apart from those options which must come selected in the select box, I wanted additional ajax functionality which would give values from a remote source.
Here is my code for select2
$(function(){
$(".myList").each(function(){
$(this).select2({
placeholder: "Search for fruits",
minimumInputLength: 2,
multiple: true,
id: function(e) {
return e.id+":"+e.name; },
ajax: {
url: "https://localhost:8443/fruit_search",
dataType: 'json',
data: function(term, page) {
return {
q: term
};
},
results: function(data, page) {
var frts=[];
$.each(data,function(idx,Frt){
frts[frts.length]=Frt;
});
return {
results: frts
};
}
},
initSelection: function(element, callback) {
var data = [];
},
formatResult: formatResult,
formatSelection: formatSelection
});
});
});
But I am getting the error:
Error: Option 'id' is not allowed for Select2 when attached to a
<select> element.
But when I use <input type="hidden"> then where should I keep the pre-selected options? How do I show them up when the select2 box appears?

If you only have values then you can use 'val' to get pre-selected values like this.
var PRESELECTED_FRUITS = [ '1','2','3'];
$('.myList').select2({}).select2('val', PRESELECTED_FRUITS);

You can use the "data" function to set the initial values:
var PRESELECTED_FRUITS = [
{ id: '1', text: 'Apple' },
{ id: '2', text: 'Mango' },
{ id: '3', text: 'Orange' }
];
$('.myList').select2('data', PRESELECTED_FRUITS)
Note: The "val" function is another way to set the initial values, but you only specify the ids with that function. In that case you would have to supply an "initSelection" function that builds the objects from the ids.
Also note that the "id" option is not the only option that is forcing you to use a hidden input. You cannot use the "ajax" option with a select element either.
As for the "id" option, I don't think you need it. Just put logic in the ajax "results" function so it builds an array of objects that have the proper id and text properties, or have the server return objects with those properties.
jsfiddle demo

To preset values use the 'val' property to preset the selected values.
$(this).select2({
val: ["1","2","3"]
}
But why not remove the 'id' function? If possible you could return the correct 'id' from the server without the need of the id function.

You can also load the values into the HTML:
<select class="selector" multiple="multiple" >
<option selected value="1">Apple</option>
<option selected value="2">Mango</option>
<option selected value="3">Orange</option>
</select>
And connect select2 to it:
$(".selector").select2({
width: 'inherit',
minimumInputLength: 2,
minimumResultsForSearch: 10,
placeholder: "Search for fruits",
ajax: {
delay: 1000,
url: "/bla_foo",
dataType: 'json',
type: "GET",
}
})
and select2 will prefill the form.

$('select').select2({
multiple: true,
data: [
{id: 1, text: 'Foo', selected: true},
{id: 2, text: 'Bar', selected: true}
]
})

$("#select2").select2('data', {id: '3', text: 'myText'});

Using JS/jQuery to manipulate option select list where the name is an array

Let's say I have a list of selects that are all named batters[] which are all identical lists. Sample code might be:
<select name="batters[]">
<option value="945">Bobby Abreu</option>
<option value="808">Erick Almonte</option>
</select>
<select name="batters[]">
<option value="945">Bobby Abreu</option>
<option value="808">Erick Almonte</option>
</select>
<select name="batters[]">
<option value="945">Bobby Abreu</option>
<option value="808">Erick Almonte</option>
</select>
... and so forth.
I want a client-side implementation where I select something from another list, say:
<select name="teams">
<option value="1">Cleveland Indians</option>
<option value="2">Boston Red Sox</option>
</select>
Which then modifies the "batters" lists to a pre-defined lineup that represents that team. What's the best way to write some JS/jQuery that can see when the "teams" select changes and then modifies each value of the "batters[]" list? Is this possible using an array for the name in batters?
Hope this makes sense. Thanks!

Teams stored as a map from team name to team players:
var teams = {
'Cleveland Indians': [
{name: 'Bobby Abreu', value: 945},
{name: 'Erick Almonte', value: 808},
{name: 'Sammy Sosa', value: 999}
],
'Boston Red Sox': [
{name: 'Kurt Schilling', value: 38},
{name: 'Babe Ruth', value: 42},
{name: 'Mark McGuire', value: 101}
]
};
$('select[name=teams]').change(function ()
{
var team = teams[$(this).val()];
$('select[name="batters[]"]').html
(
$.map(team, function (elt, i)
{
return '<option value="' + elt.value + '">'
+ elt.name + '</option>';
}).join('')
);
}).change();
Demo: http://jsfiddle.net/mattball/UU99R/
Or, just an array of teams (more like the code in the OP):
var teams = [
[
{name: 'Bobby Abreu', value: 945},
{name: 'Erick Almonte', value: 808},
{name: 'Sammy Sosa', value: 999}
],
[
{name: 'Kurt Schilling', value: 38},
{name: 'Babe Ruth', value: 42},
{name: 'Mark McGuire', value: 101}
]
];
// just change
var team = teams[$(this).val()];
// to
var team = teams[this.selectedIndex];
Demo: http://jsfiddle.net/mattball/HBSU8/

You could do something like this:
$(document).ready(function(){
$("select[name='teams']").change(function(e){
var teamId = e.target.value;
console.log(e.target.value);
$.ajax({
//your url
//the data you wanna pass I suppose: teamId
//method type: GET or POST
//datatype: let's say your backend returns some JSON you would say JSON
//Finally in the successCallback you would process that JSON object and populate each of your select
});
});
});

change
<select name="batters[]">
to
<select id='batters_select' name="batters[]">
script code like:
batters[1]={{num: 443,name: "Batter Best"},{num: 443,name: "Batter Worst"}}
$(function() {
$('select:[name="teams"]').change(function() {
var me=$(this);
var options='';
var v=me.val();
for (var batter in batters[v]){
options+='<option value='+batter.num+'>'+batter.name+'</option>'
}
$('#batters_select').html(options);
}}));